前言
面试被问到了css垂直居中的方法,当时只答上来了几种,因此下来之后百度了一下,然后总结如下
1.absolut,relative,margin-left,margin-top
//html
<div class="parent">
<div class="child">
这里被我垂直居中了。
</div>
</div>
//css
.parent{
height: 600px;
border: 1px solid red;
position: relative;
}
.child{
border: 1px solid green;
width: 300px;
height:100px;
position: absolute;
background:red;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -50px;
}
2.absolut,relative,translate
//html
<div class="parent">
<div class="child">
这里被我垂直居中了。
</div>
</div>
//css
.parent{
height: 600px;
border: 1px solid red;
position: relative;
}
.child{
border: 1px solid green;
width: 300px;
height:100px;
position: absolute;
background:red;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
3.absolute,relative,margin,auto
//html
<div class="parent">
<div class="child">
这里被我垂直居中了。
</div>
</div>
//css
.parent{
height: 600px;
border: 1px solid red;
position: relative;
}
.child{
border: 1px solid green;
width: 300px;
height:100px;
position: absolute;
background:red;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
4.:afte,:before加上inline-block
//html代码
<div class="parent">
<div class="child">
这里被我垂直居中了。
</div>
</div>
//css
.parent{
border: 3px solid red;
height: 600px;
text-align: center;
}
.child{
border: 3px solid black;
display: inline-block;
width: 300px;
vertical-align: middle;
}
.parent:before{
content:'';
outline: 3px solid red;
display: inline-block;
height: 100%;
vertical-align: middle;
}
.parent:after{
content:'';
outline: 3px solid red;
display: inline-block;
height: 100%;
vertical-align: middle;
}
5.flex
//html
<div class="parent">
<div class="child">
这里被我垂直居中了。
</div>
</div>
//css
.parent{
height: 600px;
border: 3px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.child{
border: 3px solid green;
width: 300px;
height: 100px;
}
6.writing-mode
//html代码
<div class="g-father">
<div class="parent">
<div class="child">这里垂直居中了</div>
</div>
</div>
//css
.g-father {
writing-mode: vertical-lr;
text-align: center;
}
.parent{
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
.child{
display: inline-block;
margin: auto;
text-align: left;
}