css設定元素水平垂直居中的方法
阿新 • • 發佈：2019-01-22
看到標題，相信大家並不陌生。這個問題，經常會出現在面試題中。通常會要求面試者寫出幾種方法。那麼，究竟有幾種方法，每種方法的相容情況如何，相信大家很少研究過。今天，我們就一起來看看。
說明：此方法，在我們工作中經常用到，相容性好。demo
說明：這種方法在移動端被廣泛使用。但是，只支援高版本瀏覽器（IE9＋以上的瀏覽器支援）。demo
說明：利用表格的特性，將子元素看成行內元素，實現元素中的文字(文字可以是單行的，也可以是多行的)或圖片水平垂直居中。demo
通常分為2種情況，已知元素的寬度或未知。
我們先說說在已知的情況下，要如何設定。
舉例說明：有2個元素，讓子元素相對於父元素水平垂直居中。
html程式碼：
<div class="box">
<div class="innerbox">css設定元素水平垂直居中顯示</div>
</div>1、利用定位及設定元素margin值為自身的一半。
css程式碼：
.box{ width: 400px; height: 200px; border: 5px solid #ddd; margin: 50px auto; position: relative; } .innerbox{ width: 300px; height: 100px; border: 5px solid #f00; font-size: 16px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -150px; }
說明：此方法，在我們工作中經常用到，相容性好。demo
2、margin：auto
css程式碼：
.box{ width: 400px; height: 200px; border: 5px solid #ddd; margin: 50px auto; position: relative; } .innerbox{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 300px; height: 100px; margin: auto; border: 5px solid #f00; }
說明： position: absolute; left: 0; right: 0; top: 0; bottom: 0;這是自動填充父元素的可用空間。然而給子元素設定了寬高，那麼多餘的空間，會被margin：auto平均分配。
檢視demo
跟已知元素寬高相比，實現未知元素寬高水平垂直居中顯示的方法較多。
1、利用css3屬性transform實現。
css程式碼：
.box{ width: 400px; height: 200px; border: 5px solid #ddd; margin: 50px auto; position: relative; } .innerbox{ position: absolute; left: 50%; top: 50%; border: 5px solid #f00; transform: translate(-50%,-50%); }
說明：這種方法在移動端被廣泛使用。但是，只支援高版本瀏覽器（IE9＋以上的瀏覽器支援）。demo
2、將父元素設定成display: table, 子元素設定為單元格 display: table-cell。這個方法跟上面介紹的方法不同，它不是讓元素居中，而是讓元素包含的內容居中。
css程式碼：
.box{
width: 400px;
height: 200px;
border: 5px solid #ddd;
margin: 50px auto;
display: table;
}
.innerbox{
display: table-cell;
vertical-align: middle;
text-align: center;
border: 5px solid #f00;
}說明：利用表格的特性，將子元素看成行內元素，實現元素中的文字(文字可以是單行的，也可以是多行的)或圖片水平垂直居中。demo
3、css3新的佈局方法，彈性佈局 display: flex。這個方法，在已知或未知元素寬高的情況下，都能使元素居中顯示。
css程式碼：
.box{
width: 400px;
height: 200px;
border: 5px solid #ddd;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
}
.innerbox{
width: 300px; /*寬度可以省略*/
height: 100px; /*高度可以省略*/
border: 5px solid #f00;
font-size: 16px;
}說明： 此方法只支援IE9＋以上的瀏覽器。display: flex代表彈性佈局，align-items: center 代表垂直方向上的居中，justify-content: center代表水平方向上的居中。這些是css3中的新屬性，感興趣的同學可以查詢相關資料學習。這裡不多介紹。demo