如何使div居中
阿新 • • 發佈:2018-01-13
fonts cal pos idt fontsize ali absolute cell text
今天要講的主要內容如題,**即如何在一個div中使其子div居中**。
我在網上其他地方也看到過對其的不同實現方式,幾天主要做一個詳細的匯總,希望對大家有幫助。
假設父div的類名為father,子div的類名為son。在html中的形式如下:
<div class="father">
<div class="son">
</div>
接下來用css設置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;
內容水平居中align-items:center;
內容垂直居中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都兼容,其他瀏覽器沒測,目測是都兼容的。歡迎大家查漏補缺!
如何使div居中