实现居中
line-hight实现垂直居中
- 将line-hight与容器高设置一致。demo
通过display:flex
- 通过设置justify-content和align-items实现居中。 demo
.fatherclass {
display: flex;
justify-content: center;
align-items: center;
}
定位与translate()实现居中
- 实现垂直居中 demo
.class {
position: relative;
top: 50%;
transform: translate(0,-50%);
}
- 可使块级元素在父容器中水平垂直居中 demo
.class {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
- 使用绝对定位在浏览器窗口中水平垂直居中 demo
.class {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
display: table-cell实现居中
这将使元素不再是block元素,宽度不再自适应。
- 使元素在父容器中水平垂直居中 demo
.fatherclass {
display:table-cell;
text-align: center;
vertical-align: middle;
}
vertical-align与display: inline-block实现居中
注意vertical-align是调整不了块级元素。
- 使添加一个伪元素，使inline-block属性元素在父容器中水平垂直居中 demo
.fatherclass:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.class {
display: inline-block;
vertical-align: middle;
border: 1px dashed;
}
