在工作中或者面试中经常会碰到用css实现div水平垂直居中的问题，在这里小小的总结一下。
- 不知道div的宽高的情况下可以使用绝对定位(父元素需相对定位)和 transform 实现
- 知道div宽高的情况下可以使用绝对定位(父元素需相对定位)和margin实现
- 绝对定位下top left right bottom 都设置0配合margin:auto也可实现水平垂直居中
- 给父元素添加flex css样式也可以实现水平垂直居中
- 给父元素设定display: table-cell 然后利用text-align以及vertical-align也可以实现(子元素需转换为行内元素)
1.
<style>
.father{
background: red;
position: relative;
width: 500px;
height: 500px;
background: red;
}
.children {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="father">
<div class="children">
我是水平垂直居中的元素
</div>
</div>
</body>
效果图：
2.
<style>
.father{
background: red;
position: relative;
width: 500px;
height: 500px;
background: red;
}
.children {
background: aqua;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
<body>
<div class="father">
<div class="children">
我是水平垂直居中的元素
</div>
</div>
</body>
效果图
3.
<style>
.father{
position: relative;
width: 500px;
height: 500px;
background: red;
}
.children {
background: aqua;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
<body>
<div class="father">
<div class="children">
我是水平垂直居中的元素
</div>
</div>
</body>
效果图
4
<style>
.father{
display: flex;
width: 500px;
height: 500px;
justify-content: center;
align-items: center;
background: red;
}
.children {
background: aqua;
width: 200px;
height: 200px;
}
</style>
<body>
<div class="father">
<div class="children">
我是水平垂直居中的元素
</div>
</div>
</body>
效果图
5
<style>
.father{
background: red;
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.children {
background: aqua;
width: 200px;
height: 200px;
display: inline-block;
}
</style>
<body>
<div class="father">
<div class="children">
我是水平垂直居中的元素
</div>
</div>
</body>
效果图
2569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
