简介
今天看了一遍大牛写的文章,他在文章中多次强调了基础的重要性,其中就有提到了垂直居中的多种写法,所以我打算记录几种的垂直居中的方案.顺便告诫自己,不要好高骛远,应不断的夯实基础,基础才是根本.文章的链接我也给大家列出来 . 2016年前端技术观察 ,有兴趣大家可以去看看.
内容
为了方便我先把总体样式列出,如下:
.box {
height: 200px;
width: 200px;
position: relative;
}
.content {
height: 100px;
width: 100px;
}
- 方案一(margin:auto)
我们常用margin:0 auto;来设置已知宽高的块级元素的水平居中.其实margin:auto也可以设置垂直居中,但是还要做一些别的相关设置,才能使得其有效.代码:
-css
.margin-auto {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
-html
<div class="box">
<div class="content margin-auto ">
</div>
</div>
-效果:
9BDC01D8-D14D-4875-9B0E-E85DE3517A8C.png
- 方案二 ( 使用transform垂直居中 )
-css
.transform {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
-html
<div class="box">
<div class="content transform ">
</div>
</div>
-效果
06BD4FFC-8182-4973-B2D5-BC6A34A10DFB.png
- 方案三 (设置margin为负值)
-css
.margin-negative {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
-html
<div class="box">
<div class="content margin-negative ">
</div>
</div>
-效果
500F9346-F166-4AC5-8B39-0E502FA84D23.png
方案四 (使用display:table-cell)
-css
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.vertical-middle {
display: inline-block;
}
-html
<div class="box table-cell ">
<div class="content vertical-middle">
</div>
</div>
-效果
7C62EC9C-C3A8-4453-AABE-1A9C70CB5CAE.png
- 方案五 (使用伪元素)
-css
.line {
text-align: center;
}
.line::before {
content: "";
display: inline-block;
width: 1px;
height: 100%;
background-color: white;
vertical-align: middle;
}
.line-after {
vertical-align: middle;
display:inline-block
}
-html
<div class="box line">
<div class="content line-after ">
</div>
</div>
-效果
371DD2E9-A931-41A4-93B1-8B764B929C92.png
- 方案六 (使用flex,伸缩布局)
这里要说一下,这是我比较喜欢的方式.唯一的遗憾就是有兼容性问题.
-css
.flex {
display: flex;
justify-content: center;
align-items: center;
}
-html
<div class="box flex">
<div class="content ">
</div>
</div>
-效果
3743C4D0-DE41-4538-B944-EEBF4B65A626.png
结束
好了,就介绍着几种方案,毕竟本人知识有限.最后来张全家福
9F0AD107-D8E5-41DC-8BAA-EC9106121D86.png
