CSS如何水平垂直置中？CSS水平垂直置中的方法匯總

直接進入主題！

一、脫離文檔流元素的置中

方法一：margin:auto法

CSS代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

div{       width:400px;       height:400px;       position:relative;       border:1pxsolid#465468;  }  img{       position:absolute;       margin:auto;       top:0;       left:0;       right:0;       bottom:0;  }

HTML代碼：

1 2 3

<div>    <imgsrc="mm.jpg"> </div>

效果圖：

當一個元素絕對位置時，它會根據第一個不是static定位的祖先元素定位，因此這裡的img根據外層div定位。

方法二：負margin法

CSS代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.container{       width: 500px;       height: 400px;       border: 2px solid #379;       position: relative;  }  .inner{       width: 480px;       height: 380px;       background-color: #746;       position: absolute;       top: 50%;       left: 50%;       margin-top: -190px; /*height的一半*/       margin-left: -240px; /*width的一半*/  }

HTML代碼：

1 2 3

<divclass="container">     <divclass="inner"></div> </div>

效果圖：

 

這裡，我們首先用top:50%和left:50%讓inner的座標原點（左上方）移動到container的中心，然後再利用負margin讓它往左位移自身寬的一半，再往上位移自身高的一半，這樣inner的中心點就跟container的中心點對齊了。

二、未脫離文檔流元素的置中

方法一：table-cell法

CSS代碼：

1 2 3 4 5 6 7 8 9 10 11

div{     width:300px;     height:300px;     border:3pxsolid#555;     display:table-cell;     vertical-align:middle;     text-align:center; } img{     vertical-align:middle; }

HTML代碼：

1 2 3

<div>     <imgsrc="mm.jpg"> </div>

效果圖：

div上面的vertical-align: middle是控制垂直方向上的置中的，而text-align: center是控制水平方向的。一個有趣的事實是，當我們去掉img的vertical-align: middle之後，是這樣的： 

還是置中啊！真的置中嗎？

我們看到，圖片往上移了一點，在垂直方向上已經不置中了。為什嗎？我也不知道為什麼，如果你知道，可以告訴我嗎？

但是如果我們把圖片換成文字：

CSS代碼：

1 2 3 4 5 6 7 8 9 10 11

div{     border:3pxsolid#555;     width:300px;     height:200px;     display:table-cell;     vertical-align:middle;     text-align:center; } span{     vertical-align:middle; }

HTML代碼：

1 2 3

<div>     <span>這是放在span中的文字，通過外層div設定display: table-cell以及vertical-align: middle實現垂直置中。</span> </div>

效果圖：

 

當我們把span的vertical-align: middle去掉之後是這樣的：

 

看到差別沒？文字的行間距更小了。如果你在自己電腦上運行代碼就會發現，這幾行字是向中間靠了，而並沒有像圖片一樣往上移。我也在想辦法搞清楚這是怎麼回事，如果你知道原因，也煩請告訴我。

方法二：彈性盒子法

CSS代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.container{       width:300px;       height:200px;       border:3pxsolid#546461;       display: -webkit-flex;       display: flex;       -webkit-align-items:center;       align-items:center;       -webkit-justify-content:center;       justify-content:center;  }  .inner{       border:3pxsolid#458761;       padding:20px;  }

HTML代碼：

1 2 3 4 5

<divclass="container">     <divclass="inner">         我在容器中水平垂直置中     </div> </div>

效果圖：

 

align-items控制垂直方向的置中，justify-content控制水平方向的置中。這是CSS3的新方法，瀏覽器支援情況如下：