今天，我就借这张图总结一下居中问题。
从图中来看，这里涉及到三处居中。
第一处居中 是白色背景块相对于 body 水平垂直居中。
第二处居中 文字相对于白色背景块垂直居中
第三处居中 图片相对于白色背景块垂直居中
先来看看如何实现，下面是我的 html 代码：
<body>
<div class="container">
<img src="logo.png" alt="logo">
<span>翼灵物联工作室</p>
</div>
</body>CSS代码：
body {
background-color: lightblue;
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 768px;
height: 200px;
background-color: #fff;
text-align: center;
line-height: 200px;
}
img {
vertical-align: middle;
}这三处居中的代码分别如下：
第一处居中：
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}第二处居中：
.container {
height: 200px;
line-height: 200px;
text-align: center;
}第三处居中：
img {
vertical-align: middle;
}这是我的一种实现方式。
我对这种方式的误解主要就是 vertical-align: middle; 语句。
vertical-align 属性
先看看两个误解：
误解1：认为 vertical-align: middle; 是作用于父元素。
误解2：认为 vertical-align: middle; 是相对于父元素。
然后，来看看 vertical-align 的定义：
vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式。
也就是说，vertical-align 是作用于自身的，并且是相对于所在行。
也就是说对图片设置 vertical-align：middle 仅仅只能实现图片相对于这一行的文字中线对齐。
扫一扫
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
