當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

花式垂直居中

發布時間：2025/4/5 编程问答 19 豆豆

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

方法一：

原理：在元素屬性為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> 復制代碼

方法二：

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

方法三：

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

方法四：

原理：使用css3的display: -webkit-box屬性，再設置-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>復制代碼

方法六：

原理：使用: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>復制代碼

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。