垂直居中，当不确定父类高度时
2018-08-15 本文已影响38人
Lia代码猪崽
如果知道父类的高度，文字居中可以直接用line-height属性来做。
但是如果父类的高度是会变化的，比如下面的demo，会随body来变化，则需要用绝对定位和位偏移属性了。
参考资料
CSS3 transform-translate
CSS 绝对定位
话不多说，直接上代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
width: 100%;
height: 100%;
}
.parent {
position: absolute;
width: 500px;
height: 500px;
background-color: palevioletred;
}
.children {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">我要居中</div>
</div>
</body>
</html>
使用了绝对定位之后，过头了
可以看到，并没有居中，有点过头了，因为还忽略了紫色模块的高度和宽度。
如果要紫色模块在粉色模块中垂直居中，紫色模块距离粉色模块的顶部的距离，应该是50%的粉色高度 - 50% 的紫色高度，水平居中的宽度同理。
所以这时候，可以用CSS3的位偏移，挪回去。
transform: translate(-50%, -50%);
完整代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
width: 100%;
height: 100%;
}
.parent {
position: absolute;
width: 500px;
height: 500px;
background-color: palevioletred;
}
.children {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
transform: translate(-50%, -50%);
color: #fff;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">我要居中</div>
</div>
</body>
</html>
居中啦
