父元素的height不写死
只需要给父元素加一个padding就能实现子元素垂直居中。
<div class='parent'>
<div class='child'>
测试
</div>
</div>
</body>
.parent{
border:1px solid red;
padding:10px 0;
}
.child{
border:1px solid green;
}
父元素的height写死
1、使用table自带的功能
<body>
<table class='parent'>
<tr>
<td class='child'>
测试测试测试测试
</td>
</tr>
</table>
</body>
.parent{
border:1px solid red;
height:100px
}
.child{
border:1px solid green;
}
2、div装成table
<body>
<div class='parent'>
<div class="td">
<div class='child'>
测试测试
</div>
</div>
</div>
</body>
.parent {
display:table;
border: 1px solid red;
height: 100px
}
.td{
display:table-cell;
border: 1px solid green;
vertical-align:middle;
}
.child {
border: 1px solid green;
}
3、100%高度的after跟before加上inline-block;
这个就是在要居中的元素前后加一个扁担，把他撑起来；给前后元素加上高度百分之百的两个隐藏的行内块，然后让这几个元素都居中。
.parent {
border: 1px solid red;
height: 100px;
text-align: center;
}
.child {
border: 1px solid green;
display: inline-block;
width: 300px;
vertical-align: middle;
}
.parent:before {
border: 1px solid green;
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.parent:after {
border: 1px solid green;
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
4、使用绝对定位跟负的margin-top
<body>
<div class='parent'>
<div class='child'>
测试测试
</div>
</div>
</body>
.parent{
height: 250px;
border: 1px solid red;
position: relative;
}
.child{
border: 1px solid green;
width: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
height: 100px;
margin-top: -50px;
}
5、使用绝对定位跟translate
.parent{
height: 250px;
border: 1px solid red;
position: relative;
}
.child{
border: 1px solid green;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%)
}
6、使用绝对定位跟margin:auto
.parent{
height: 250px;
border: 1px solid red;
position: relative;
}
.child{
border: 1px solid green;
position: absolute;
width:300px;
height:200px;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
}
7、使用flex布局
.parent{
height: 250px;
border: 1px solid red;
display:flex;
justify-content:center;
align-items:center;
}
.child{
border: 1px solid green;
}
