对于一个前端开发人员,元素居中在布局中相当常见,水平居中实现非常非常容易,如果是行内元素,设置text-align:center就行,如果是块级元素,通过设置边距margin:auto可实现水平居中。
垂直居中实现起来相对较为较为麻烦,不啰嗦,直接上干货。主要有下面几种方法:
1、绝对定位方法
<div id="main"></div>
#main{
position: absolute;;
background: red;
width: 200px;
height: 200px;
top:50%;
left:50%;
margin-top: -100px;
margin-left: -100px;
}
margin-top和magin-left是为了消除绝对定位50%带来的偏差,值为块级元素高和宽的一半的负值,不用过多解释,应该都能理解。
借助calc()函数,可以将上面的代码改造如下
#main{
position: absolute;;
background: red;
width: 200px;
height: 200px;
top:calc(50% - 100px);
left:calc(50% - 100px);
}
2、基于视口单位的方法
#main{
background: red;
width: 200px;
height: 200px;
margin:50vh auto 0;
transform: translateY(-50%);
}
关于vh,transform,translateY不清楚的同学可以去百度一下。
3、基于弹性布局(flex)实现
这是比较推荐的一种方法,弹性布局的出现,的确是福音。
body{
display: flex;
min-height: 100vh;
margin:0;
}
#main{
background: red;
width: 200px;
height: 200px;
margin: auto;
}
上面就是垂直居中的几种常用方法,欢迎大家批评指正。