給父div如下CSS屬性;
/*讓子DIV居中*/
display:flex;
justify-content:center; /*內(nèi)容水平居中*/
align-items:center; /*內(nèi)容垂直居中*/
如何在一個div中使其子div居中
來源于：
https://blog.csdn.net/u012088576/article/details/68483623
假設(shè)父div的類名為father，子div的類名為son。在html中的形式如下：
<div class="father">
<div class="son">
</div>
接下來用css設(shè)置son居中的方法主要有4
方法一（使用絕對布局）：
.father{
width:500px;
height:500px;
position:relative;
background-color:red;
}
.son{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
background-color:black;
}
效果圖如下：
方法二（使用table-cell形式）
.father{
width:500px;
height:500px;
display:table-cell;
text-align:center;
vertical-align:middle;
background-color:red;
}
.son{
width:200px;
height:200px;
display:inline-block; ps：這句話一定要加，不然沒效果哦
background-color:black;
}
效果如上
3.方法三（使用彈性布局flex）
.father{
width:500px;
height:500px;
display:flex;
justify-content:center; 內(nèi)容水平居中
align-items:center; 內(nèi)容垂直居中
background-color:red;
}
.son{
width:200px;
height:200px;
background-color:black;
}
效果如上
4.方法四（使用絕對布局）
.father{
width:500px;
height:500px;
display:relative;
background-color:red;
}
.son{
width:200px;
height:200px;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background-color:black;
}
效果如上
這是目前我所了解的4種方法，ie和chrome都兼容，其他瀏覽器沒測，目測是都兼容的。歡迎大家查漏補缺！
---------------------
作者：差不多先生img
來源：CSDN
原文：https://blog.csdn.net/u012088576/article/details/68483623
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！
以下來源于：
http://zh.learnlayout.com/flexbox.html
新的?flexbox?布局模式被用來重新定義CSS中的布局方式。很遺憾的是最近規(guī)范變動過多，導(dǎo)致各個瀏覽器對它的實現(xiàn)也有所不同。不過我仍舊想要分享一些例子，來讓你知道即將發(fā)生的改變。這些例子目前只能在支持 flexbox 的 Chrome 瀏覽器中運行，基于最新的標準。
網(wǎng)上有不少過時的 flexbox 資料。 如果你想要了解更多有關(guān) flexbox 的內(nèi)容，從這里學(xué)習(xí)如何辨別一份資料是否過時。我已經(jīng)寫了一份關(guān)于最新標準的詳細文章。
使用flexbox你還可以做的更多；這里只是一些讓你了解概念的例子：
使用 Flexbox 的簡單布局
.container {
display: -webkit-flex;
display: flex;
}
nav {
width: 200px;
}
.flex-column {
-webkit-flex: 1;flex: 1;
}
使用 Flexbox 的牛逼布局
.container {
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
}
.none {
-webkit-flex: none;
flex: none;
width: 200px;
}
.flex1 {
-webkit-flex: 1;
flex: 1;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
使用 Flexbox 的居中布局
.vertical-container {
height: 300px;display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
