问题:在实现元素水平居中的时候,可以转成行内块, 给父盒子设置 text-align: center。这样只能实现元素的水平居中,如何进行垂直也居中呢?
我尝试了使用line-height:200px实现垂直也居中,但发现这样的话并不能实现垂直居中,并且元素的上部分会留白。
一开始猜想是不是因为元素默认有文字,由于line-height的top挤出来空白部分?后面发现不是这个原因。下面上一下水平居中的源码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.father {
width: 200px;
height: 200px;
background-color: pink;
text-align: center;
}
.son {
width: 100px;
height: 100px;
display: inline-block;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
原因: 给父元素加上文字后就可以很直观的发现,当行内块元素水平排列在一起时,默认基线对齐,若给其中一个元素设置line-height改变了基线的位置,则另一个元素为了使基线对齐,在父盒子内的垂直距离将会有改变。