CSS垂直水平置中方法總結

標籤：水平置中   多行   相容   isp   tab   img   ext   ica   一行代碼   

在布局的時候經常能用到置中，在此總結一下

html結構：

<div class="wrap">    <div class="content"></div></div>

1.水平置中：margin:auto;

.wrap{    width: 400px;    height: 400px;    background-color: lightblue;}.content{    width: 200px;    height: 200px;    background-color: lightcoral;    /*margin:auto只能水平置中*/        margin: auto;}    

此方法簡單只需一行代碼，但是只能水平置中，至於為什麼垂直置中不起作用呢：預設寬度繼承父級寬度,而高度不能繼承可以由內容撐開，置中計算時是相對父級計算因此垂直置中不起作用

效果如下：

2.垂直置中：table-cell

.wrap{
   width: 400px;
   height: 400px;
   background-color: lightblue;
   /* 將父元素的display設定為table-cell*/
   display: table-cell;                
   vertical-align: middle;
}
.content{
   width: 200px;
   height: 200px;
   background-color: lightcoral;
}

這裡要強調一點就是display:table-cell是對父元素設定的，在表格單元中，vertical-align屬性會設定儲存格框中的儲存格內容的對齊。這裡設定為middle置中對齊，有興趣的小夥伴也可以試試其他值如：top,bottom等。

效果如下：

3.一個水平置中，一個垂直置中放在一起是不是就可以垂直水平置中了

.wrap{    width: 400px;    height: 400px;    background-color: lightblue;    display: table-cell;    vertical-align: middle;}.content{    width: 200px;    height: 200px;    background-color: lightcoral;    margin: auto;}

：

bingo就是這麼完美 

4.絕對位置（高度未知）

.wrap{    width: 400px;    height: 400px;    background-color: lightblue;    /*父元素相對定位*/    position: relative;}.content{    width: 200px;    height: 200px;    background-color: lightcoral;    /*子項目絕對位置*/    position: absolute;    /*子項目分別相對top,left位移50%*/    top:50%;    left: 50%;    /*子項目相對自身top,left分別移動-50%*/    transform: translate(-50%,-50%);}        

：

上面兩種方法優點在於可以在高度未知的情況下使用，下面這種方法就要知道子項目高度

5.絕對位置 調整負margin值

.wrap{    width: 400px;    height: 400px;    background-color: lightblue;    /*父元素相對定位*/    position: relative;}.content{    width: 200px;    height: 200px;    background-color: lightcoral;    /*子項目絕對位置*/    position: absolute;    /*子項目分別相對top,left位移50%*/    top:50%;    left: 50%;    /*子項目相對自身top,left分別移動負100像素*/   margin-top:-100px;   margin-left:-100px;}        

與上面一種方法一樣就不在放了。

6.彈性盒模型：display:flex;

.wrap{    width: 400px;    height: 400px;    background-color: lightblue;    display:flex;}.content{    width: 200px;    height: 200px;    background-color: lightcoral;   margin:auto;}        

flex相容性問題可參考：

7.單行文本置中:line-height

html結構：

<div class="content">一切都是最好的安排</div>

css樣式：

.content{    width: 200px;    height: 200px;    background-color: lightcoral;    line-height: 200px;}

：

8.多行文本就不能用line-height了，還可以用上面table-cell方法來使多行文本置中

.content{    width: 200px;    height: 200px;    background-color: lightcoral;    display:table-cell;    vertical-align:middle; }

可以直接在div(.content)中輸入文本或者文本輸入在一個標籤裡

CSS垂直水平置中方法總結