1 水平居中
首先讨论一下如何将一个元素进行水平居中。给定以下HTML代码。
<div class='box'>
水平居中
</div>
通过css实现div的水平居中。
.box{
width:300px;
height: 300px;
margin: 0 auto;
}
首选设置box的宽度和高度,然后设置box外边距margin就可以实现水平居中。实现的原理很简单,利用了盒模型来解决这个问题。
box的盒模型水平布局由以下7个属性相加组成。
- margin-left
- border-left
- padding-left
- width
- padding-right
- border-right
- margin-right
假设浏览器的宽度是1080px,那么box的父元素的宽度也是1080px,box想在父元素容器里面实现水平居中,通过设置margin的左右边距就可以实现。但浏览器的宽度不是固定的,要想动态实现水平居中,那么就不能固定设置margin的值。
通过margin:0 auto
就可以自动设置左右边距,其代表的意思是,上下外边距为0,左右外边距自动,auto就会自动折半给box设置外边距。
2 水平垂直居中
2.1 方法一
<div class='box'>
</div>
/* 设置top,bottom,left,right都为0,margin为auto */
.box{
width:200px;
height:200px;
background-color:#bra;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
2.2 方法二
<div class='box'>
</div>
/* 设置margin向负方向移动,移动的距离是box宽高的一半 */
.box{
width:200px;
height:200px;
background-color:#bra;
position:absolute;
left:'50%',
right:'50%',
margin: -100px -100px;
}
2.3 方法三
<div class='box'>
</div>
/* 通过translate来平移实现,相比于上面哪种方法,可以实现自适应 */
.box{
width:200px;
height:200px;
background-color:#bra;
position:absolute;
left:'50%';
right:'50%';
transform:translate('50%','50%')
}
2.4 方法四
<div class='box'>
<div class='box1'>
</div>
</div>
/* flex布局法,设置水平和垂直居中 */
.box{
dispaly:flex;
align-items:center;
justify-content:center;
height:1000px;
}
.box1{
width:100px;
height:100px;
background-color:pink;
}
通过flex布局实现水平垂直居中要注意一个问题,前面几个例子都是一个div元素,而掌柜例子有两个div元素,使用需要将外面的div设置一个高度,这样垂直布局居中才会生效,否则就外面div的高度就是子div的高度,看不出来水平垂直居中的效果。