CSS總結div中的內容垂直居中的五種方法

文章目錄

 

• 1、行高（line-height）法
• 2、內邊距（padding）法
• 3、模擬表格法
• 4、CSS3的transform來實現
• 五：css3的box方法實現水平垂直居中
• 六：flex佈局

1、行高（line-height）法

若是要垂直居中的只有一行或幾個文字，那它的製做最爲簡單，只要讓文字的行高和容器的高度相同便可，好比：

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

這段代碼能夠達到讓文字在段落中垂直居中的效果。

2、內邊距（padding）法

另外一種方法和行高法很類似，它一樣適合一行或幾行文字垂直居中，原理就是利用padding將內容垂直居中，好比：

p { padding:20px 0; }

這段代碼的效果和line-height法差很少。

3、模擬表格法

將容器設置爲display:table，而後將子元素也就是要垂直居中顯示的元素設置爲display:table-cell，而後加上vertical-align:middle來實現。

html結構以下：

<div id="wrapper"> <div id="cell"> <p>測試垂直居中效果測試垂直居中效果</p> <p>測試垂直居中效果測試垂直居中效果</p> </div> </div>

 

css代碼：

#wrapper {display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;} #cell{display:table-cell; vertical-align:middle;}

 

實現如圖所示：

遺憾的是IE7及如下不支持。

4、CSS3的transform來實現

css代碼以下：

.center-vertical{
  position: relative; top:50%; transform:translateY(-50%); }.center-horizontal{ position: relative; left:50%; transform:translateX(-50%); }

 

五：css3的box方法實現水平垂直居中

html代碼：

<div class="center"> <div class="text"> <p>我是多行文字</p> <p>我是多行文字</p> <p>我是多行文字</p> </div> </div>

css代碼：

.center {
  width: 300px; height: 200px; padding: 10px; border: 1px solid #ccc; background:#000; 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; }

 結果如圖：

 六：flex佈局（2018/04/17補充）


html代碼：

<div class="flex"> <div> <p>我是多行文字我是多行文字我是多行文字我是多行文字</p> <p>我是多行文字我是多行文字我是多行文字我是多行文字</p> </div> </div>

CSS代碼：

.flex{
    /*flex 佈局*/ display: flex; /*實現垂直居中*/ align-items: center; /*實現水平居中*/ justify-content: center; text-align: justify; width:200px; height:200px; background: #000; margin:0 auto; color:#fff; }

實現效果：