CSS基础布局技巧之水平垂直居中

喺小VIE
594 阅读4分钟

将一个元素呈现在页面正中间是很常见的一个布局场景，在传统的盒模型中，熟练地掌握元素的水平垂直居中布局可以加深对元素特性的认识，也可以加强对 CSS 样式基础的理解和应用。本文记录了在传统的盒模型中将元素水平垂直居中的各类实现方式，且不止于代码实现，还有其实现原理的分析。

块元素水平垂直居中

假设 HTML 页面结构如下，如何让.inner在.outer中水平垂直居中：

<div class="outer">
  <div class="inner"></div>
</div>

这里来分析一下如何让块元素水平垂直居中：

  • 块元素不同于行内元素，它的宽高是可以指定的。
  • 因为宽高是可指定的，也就意味着能够使用margin: auto来让外边距自动适应。
  • 由于涉及到margin塌陷，margin-top可能不会有效果。
  • 解决margin塌陷可以让.outer用overflow: hidden。
.outer {
    width: 200px;
    height: 200px;
    background-color: gray;
    overflow: hidden;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: 0 auto;
    margin-top: 50px;
}

页面中展示的效果：
image.png

块元素文字水平垂直居中

同样是上一个例子，不过在这个例子中，要让.inner元素中的文字水平垂直居中：

<div class="outer">
  <div class="inner">content</div>
</div>

.outer {
  width: 200px;
  height: 200px;
  background-color: gray;
  overflow: hidden;
}
.inner {
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 0 auto;
  margin-top: 50px;
}

此时.inner元素中文字呈现如下：

image.png

来分析一下如何让元素中的文字水平垂直居中：

  • 首先文字水平居中可以使用text-align: center实现。
  • 在垂直方向上文本虽然不能直接设定，不过可以使用line-height，使行高等于元素的高。
.inner {
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 0 auto;
  margin-top: 50px;
  text-align: center;
  line-height: 100px;
}

页面中展示的效果：
image.png

行内元素水平垂直居中

假设 HTML 页面结构如下，如何让.inner在.outer中水平垂直居中：

<div class="outer">
  <span class="inner">
    content
  </span>
</div>

这里来分析一下如何让行内元素水平垂直居中：

  • 行内元素不同于块元素，它的宽高是不能指定的。
  • 因为宽高不能指定，也就意味着使用margin: auto是没有效果的。
  • 行内元素本身通常是作为包裹文字添加语义化用的，所以可以认为行内元素也是文字。
  • 所以实现方式可以参考块元素文字水平垂直居中。
  • 水平居中可以使用text-align: center。
  • 垂直居中可以让line-height等于元素的高。
.outer {
  width: 200px;
  height: 200px;
  background-color: gray;
  text-align: center;
  line-height: 200px;
}
.inner {
  background-color: orange;
}

页面中展示的效果：
image.png

行内元素+行内块元素水平垂直居中

假设 HTML 页面结构如下，如何让行内元素span和行内块元素img同时水平垂直居中：

<div class="outer">
  <span class="inner">
    xX
  </span>
  <img>
</div>

先给这些元素添加一些基本样式：

.outer {
  width: 200px;
  height: 200px;
  background-color: gray;
}
.inner {
  background-color: orange;
}
img {
  width: 50px;
  height: 50px;
  background-color: blue;
}

页面中展示的效果：
image.png

来逐步分析如何让所有元素都呈现水平垂直居中：

  1. 首先确定行内元素水平垂直居中的样式基础：line-height: 200px; text-align: center;。这时行内元素span和行内块元素img整体实现了水平垂直居中，不过由于基线对齐的原因行内块元素img并没有很好地垂直居中。

    image.png

  2. 单独调整行内块元素img使其垂直排版于中间：vertical-align: middle，所谓vertical-align: middle就是让元素的中心与父元素的基线上的x的中心对齐。

    image.png

  3. 这个时候看起来已经全都实现了水平垂直居中，但是实际上并没有，给span添加font-size: 80px就可以看到一些端倪。这里看起来并没有与父元素基线上的x的中心对齐，是因为父元素基线位置改变了，其实际计算公式为：基线 + (x高度/2)。
    image.pngimage.png

  4. 这时候就要调整行内元素span的样式，使其也同样对齐父元素基线上的x的中心：vertical-align: middle。

.outer {
  width: 200px;
  height: 200px;
  background-color: ;
  line-height: 200px;
  text-align: center;
}
.inner {
  background-color: orange;
  vertical-align: middle;
}
img {
  width: 50px;
  height: 50px;
  background-color: blue;
  vertical-align: middle;
}

最终页面中展示的效果：
image.png

总结

通过学习和掌握文中四个水平垂直居中的案例，基本可以在 CSS 的传统盒模型中应用自如了。不过当然，在传统盒模型还有浮动和定位的水平垂直居中方式需要继续学习，而在这之后则还有flex布局，grid布局都能够轻松地实现元素水平垂直居中，这些都留作后面展开探讨。

avatar
文章
阅读
粉丝