在html+css中實現文字垂直居中的方法
使用CSS進行文字的水平和垂直居中，并不是一件容易的事情，有些新手在使用css方法去實現css居中，在瀏覽器并沒有什么效果，可能是由于兼容的問題或者是一些非主流的瀏覽器。
在HTML+css中實現文字垂直居中的方法總結如下：
1.使用絕對定位和負外邊距對塊級元素進行垂直居中
css垂直居中效果：
在線測試工具：html在線編輯器
css垂直居中實現代碼：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>365建站演示</title> <style type="text/css"> #box { width: 300px; height: 300px; background: #DDD; position: relative; } #child { width: 150px; height: 100px; position: absolute; top: 50%; margin-top: -50px; margin-left: 75px; background: orange; line-height: 100px; text-align: center; } </style> </head> <body> <div id="box"> <div id="child"> 我是測試DIV </div> </div> </body> </html>
這個方法兼容性不錯，但是有一個小缺點：必須提前知道被居中塊級元素的尺寸，否則無法準確實現垂直居中。
2.使用絕對定位和transform
代碼如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>365建站演示</title> <style type="text/css"> #box { width: 300px; height: 300px; background: #DDD; position: relative; } #child { width: 150px; height: 100px; position: absolute; top: 50%; transform: translate(50%, -50%); background: orange; line-height: 100px; text-align: center; } </style> </head> <body> <div id="box"> <div id="child"> 我是測試DIV </div> </div> </body> </html>
這種方法非常明顯的好處就是不必提前知道被居中的元素的尺寸，因為transform中偏移的百分比就是相對于元素自身的尺寸而言。
3.絕對定位結合margin:auto
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>365建站演示</title> <style type="text/css"> #box { width: 300px; height: 300px; background: #DDD; position: relative; } #child { width: 150px; height: 100px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; background: orange; line-height: 100px; text-align: center; } </style> </head> <body> <div id="box"> <div id="child"> 我是測試DIV </div> </div> </body> </html>
這種方式的兩個核心是：把要垂直居中的元素相對于父元素絕對定位，top和bottom設置為相等的值，我這里設置成0了，當然也可以設置為99999px或者-99999px，無論什么，只要兩者相等就行。這一一步做完之后再將要居中的元素的margin設為auto，這樣就可以實現垂直居中了。
被居中元素的寬度也可以不設置，但是不設置的話，就必須是圖片這種自身就包含尺寸的元素，否則無法實現。
4.使用padding實現子元素的垂直居中
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>365建站演示</title> <style type="text/css"> #box { width: 300px; background: #DDD; padding: 100px 0; } #child { width: 150px; height: 100px; background: orange; line-height: 100px; margin: 0 auto; text-align: center; } </style> </head> <body> <div id="box"> <div id="child"> 我是測試DIV </div> </div> </body> </html>
這種方式非常簡單，就是給父元素設置相等的上下內邊距，則子元素自然是垂直居中的，自然這個時候父元素是不能設置高度的，要讓它自動被填充起來，除非設置了一個正好等于上內邊距+子元素高度+下內邊距的值，否則無法精確地垂直居中。
這種方式看似沒有什么技術含量，但其實在某種場景下也是非常好用的。
5.使用flex布局
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>365建站演示</title> <style type="text/css"> #box { width: 300px; height: 100px; background: #DDD; /*flex 布局*/ display: flex; /*實現垂直居中*/ align-items: center; /*實現水平居中*/ justify-content: center; } </style> </head> <body> <div id="box"> <div id="child"> 我是測試DIV </div> </div> </body> </html>
flex布局（彈性布局/伸縮布局）里門道頗多，這里先針對用到的東西簡單說一下。
flex也就是flexible，意思為靈活的，柔韌的，易彎曲的。
元素可以通過設置display:flex;將其指定為flex布局的容器，指定好了容器之后再為其添加align-items屬性，該屬性定義項目在交叉軸（這里是縱向周）上的對齊方式，可能的取值有五種，分別如下：
flex-start:交叉軸的起點對齊；flex-end:交叉軸的重點對齊；
center：交叉軸的重點對齊；baseline項目第一行文字的基線對齊；
strech(該值是默認值)：如果項目沒有設置高度或者設置為auto，那么將占滿整個容器的高度。
6.彈性布局
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>365建站演示</title> <style type="text/css"> #box { width: 300px; height: 300px; background: #DDD; /*flex 布局*/ display: flex; /*實現垂直居中*/ align-items: center; /*實現水平居中*/ justify-content: center; } #child { width: 300px; height: 100px; background: orange; line-height: 100px; text-align: center; } </style> </head> <body> <div id="box"> <div id="child"> 我是測試DIV </div> </div> </body> </html>
這種方式也是給父元素設置display:flex,設置好之后改變主軸的flex-direction:column,該屬性可能的取值有四個，分別如下：
row(該值為默認值)：主軸為水平方向，起點在左端；
row-reverse，主軸是水平方向，起點在有端；
column主軸為垂直方向，起點在上沿；
column-reverse：主軸為垂直方向，起點在下沿。
justify-content屬性定義了項目在主軸上的對齊方式，可能取的值有五個，分別如下（不過具體的對齊方式與主軸的方向有關，以下的值都是假設主軸為從左到右的）：
flex-staart(該值是默認值)：左對齊；
flex-end:右對齊；
center:居中對齊；
space-between:兩端對齊，各個項目之間的間隔均對齊；
space-around:各個項目兩側的間隔相等。
7.還有一種在前面已經見到過很多次的方式就是使用line-height對單行文本進行垂直居中
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>365建站演示</title> <style type="text/css"> #box { width: 300px; height: 300px; background: #DDD; /*flex 布局*/ display: flex; flex-direction: column; justify-content: center; } #child { width: 300px; height: 100px; background: orange; line-height: 100px; text-align: center; } </style> </head> <body> <div id="box"> <div id="child"> 我是測試DIV </div> </div> </body> </html>
這里有一個小坑需要大家注意：line-height（行高）的值不能設為100%；我們來看看官網文檔中給出的關于line-height取值為百分比時候的描述：基于當前字體尺寸的百分比行間距，所以大家就明白了，如果是百分比是相對于字體尺寸來講的。
8.使用display:table和vertical-align對容器里的文字進行垂直居中
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>365建站演示</title> <style type="text/css"> #box { width: 300px; height: 300px; background: #DDD; display: table; text-align: center; } #child { display: table-cell; vertical-align: middle; } </style> </head> <body> <div id="box"> <div id="child"> 我是測試DIV </div> </div> </body> </html>
這里關于vertical-align啰嗦兩句：vertical-align屬性只對擁有valign特性的html元素起作用，例如表格元素中的<td><th>等等，而像<div><span>這樣的元素是不行的。
valign屬性規定單元格中內容的垂直排列方式，語法：<tdvalign="value">，value的可能取值有四種：
top：對內容進行上對齊
middle：對內容進行居中對齊
bottom：對內容進行下對齊
baseline：基線對齊
關于baseline值：基線是一條虛構的線。在一行文本中，大多數字母以基線為基準。baseline值設置行中的所有表格數據都分享相同的基線。該值的效果常常與bottom值相同。不過，如果文本的字號各不相同，那么baseline的效果會更好。
9.CSS3的box方法實現水平垂直居中
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>365建站演示</title> <style type="text/css"> #box { width: 300px; height: 200px; padding: 10px; border: 1px solid #ccc; background: #DDD; color: #fff; margin: 20px auto; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; display: -o-box; -o-box-orient: horizontal; -o-box-pack: center; -o-box-align: center; display: -ms-box; -ms-box-orient: horizontal; -ms-box-pack: center; -ms-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center; } </style> </head> <body> <div id="box"> <div id="child"> 我是測試DIV </div> </div> </body> </html>
上面就是分享在html+css中實現文字垂直居中的方法，希望對你有幫助！
如對本文有疑問，請提交到交流論壇，廣大熱心網友會為你解答??！ 點擊進入論壇
鄂公網安備 42011102001344號 Copyright © 2013-2021