在前端页面中经常会有垂直居中的排版布局,而在一些前端面试时,经常也会出关于让元素垂直居中,问你有几种方法来实现的问题。
下面就是我自己在实际开发中常用的几种css写法,大家可以参考,如果有比较新的方法,欢迎留言补充[笔芯]。
一、flex弹性布局
HTML代码
<div class="box">
<div class="contant"></div>
</div>
css代码
.box{
width: 100%;
height: 100vh;
display: flex; /* 启用flex弹性盒子 */
justify-content: center; /* 平行居中 */
align-items: center; /* 垂直居中 */
background-color: #f1f1f1;
}
.contant{
width: 200px;
height: 200px;
background-color: #dddddd;
}
渲染效果
二、绝对定位+css3属性
HTML代码
<div class="box">
<div class="contant"></div>
</div>
css代码
.box{
width: 100%;
height: 100vh;
background-color: #f1f1f1;
}
.contant{
width: 200px;
height: 200px;
background-color: #dddddd;
/* 绝对定位+transform属性 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
渲染效果
三、绝对定位+margin
HTML代码
<div class="box">
<div class="contant"></div>
</div>
css代码
.box{
width: 100%;
height: 100vh;
background-color: #f1f1f1;
}
.contant{
width: 200px;
height: 200px;
background-color: #dddddd;
/* 绝对定位+margin */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
渲染效果
四、行高+内联块状元素
HTML代码
<div class="box">
<div class="contant"></div>
</div>
css代码
.box{
width: 100%;
height: 600px;
background-color: #f1f1f1;
line-height: 600px; /* 行高=高度 */
text-align: center; /* 水平居中 */
}
.contant{
width: 200px;
height: 200px;
background-color: #dddddd;
display: inline-block; /* 子元素为内联块状元素*/
}
渲染效果
五、网格系统+margin
HTML代码
<div class="box">
<div class="contant"></div>
</div>
css代码
.box{
width: 100%;
height: 100vh;
background-color: #f1f1f1;
display: grid; /* 网格系统grid */
}
.contant{
width: 200px;
height: 200px;
background-color: #dddddd;
margin: auto;
}
渲染效果
六、display: table-cell 仿表格单元格属性
HTML代码
<div class="box">
<div class="contant">文本信息</div>
</div>
css代码
.box{
width: 100%;
height: 100vh;
background-color: #f1f1f1;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.contant{
width: 200px;
height: 200px;
background-color: #dddddd;
display: table-cell;
text-align: center;
vertical-align: middle;
}
渲染效果
以上就是我常用的几种写法,还有一些其他的比如负边距离等,与上述中的某种类似,就不示例了。
一般的话,在实际开发中,你会2种其实也就够用了。
[1] 原文阅读
[2] 我是Just,听说长的好看的都关注订阅号[ 设计师工作日常 ]了!sky~ sky~