當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

花式垂直居中

發(fā)布時(shí)間：2025/4/5 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了花式垂直居中小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

方法一：

原理：在元素屬性為table使用里使用vertical-align屬性

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style media="screen">#wrapper {display: table;height: 100px;width: 60px;}#cell {display: table-cell;vertical-align: middle;}</style></head><body><div id="wrapper"><div id="cell"><div class="content">Content goes here</div></div></div></body></html> 復(fù)制代碼

方法二：

原理：對于有固定寬高的元素，利用絕對定位設(shè)置為：top: 0; bottom: 0; left: 0; right: 0; margin: auto因?yàn)檫@個(gè)元素有固定的高度，并不能距離上下都為0，margin： 0會使它居中顯示。

方法三：

原理：利用行高，設(shè)置line-height和元素等高就行。

方法四：

原理：使用css3的display: -webkit-box屬性，再設(shè)置-webkit-box-pack: cente; -webkit-box-align:c enter

方法五：

原理：使用css3的新屬性transform: translate(x,y)屬性

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style media="screen">#content {position: absolute;width: 80px;height: 80px;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);background: green;}body {position: relative;height: 400px;width: 400px;}</style></head><body><div id="content">Content Here</div></body></html>復(fù)制代碼

方法六：

原理：使用:before元素

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style media="screen">#warp {position: fixed;display: block;top: 0;right: 0;bottom: 0;left: 0;text-align: center;background: rgba(0, 0, 0, .5);}#warp:before {content: '';display: inline-block;vertical-align: middle;height: 100%;}#warp #content {display: inline-block;width: 100px;height: 100px;line-height: 100px;background: yellow;}</style></head><body><div id="warp"><div id="content">Content Here</div></div></body></html>復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的花式垂直居中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。