在学习CSS布局的过程中经常会碰到需要将元素垂直水平居中的情况,
通常的做法是通过设置一定的外边距,或者通过定位和负外边距来完成,
例如:
一,设置外边距
<pre>
<style>
.box1{
width: 800px;
height: 800px;
}
.box2{
width: 400px;
height: 400px;
margin: 200px 0 0 200px;
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</pre>
二,居中定位
<pre>
<style>
.box1{
width: 600px;
height: 600px;
postion: relative;
}
.box2{
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
}
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</pre>
但是如果需要居中的元素的宽和高无法预先知道,以上的两种方法就无法使用了,
因此我们需要另辟蹊径,
大致有以下三种方式可以酌情使用;
方法一: 弹性盒子,通过将父盒子的display属性设置为flex,并将子盒子的margin设置为auto;这种方法的好处是代码量少,而且使用弹性盒子布局较为便捷;缺点是需要支持CSS3;
<pre><style>
.div1{
width: 100%;
height: 100%;
display: flex;
}
.div2{
width: 300px;
height: 300px;
background: black;
margin: auto;
}
</style>
<body>
<div class="div1">
<span class="div2"></span>
</div>
</body>
</pre>
方法二:使用表格;在这里可以直接使用table标签,或者可以将父盒子转换成表格单元格,需要居中的元素转换为行内块元素,单元格内可以通过vertical-align属性和text-align属性将元素垂直水平居中.(或者也可以不将元素转换成行内块元素,直接将元素的外边距设置为(0,auto)来水平居中).
这种方式的优点是兼容性强,但是需要添加较多的层级,使结构变得复杂;
<pre>
<style>
.div1{
height: 100%;
width: 100%;
position: absolute;
text-align: center;
display: table;
}
.div2{
display: table-cell;
vertical-align: middle;
}
.div3{
display: inline-block;
width: 100px;
height: 100px;
background: rgb(233,233,233);
}
</style>
<body>
<div class="div1">
<div class="div2">
<div class="div3">
</div>
</div>
</div>
