如何实现CSS布局中的垂直对齐？

小蓝 • 2024-11-24 16:26 • 编程

一、vertical-align属性详解

在CSS中，有一个用于控制行内元素垂直对齐的属性：vertical-align。这个属性的取值很多，常用的如下：

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

其中，vertical-align: middle;是最常用也最简单的控制垂直居中的方式。举个例子：

<div class="container">
  <div class="child">
    <p>这里是要垂直居中的文字</p>
  </div>
</div>

.container {
  height: 300px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.child {
  display: inline-block;
}

其中，父元素.container的高度要先规定好，然后使用display: table-cell;和vertical-align: middle;就能实现这个元素内部的垂直居中。注意，这个方法只针对行内元素、内联块元素、表格单元格等这些可以应用vertical-align属性的元素有效。

二、flex布局中的垂直居中

Flex布局（Flexible Box)是CSS3新增的一种布局方式，它常用于解决常规布局难以解决的问题，比如垂直居中。

在Flex布局中，实现元素垂直居中的方法非常简单，只需要在父元素上加上display: flex;align-items: center;即可：

<div class="container">
  <div class="child">
    <p>这里是要垂直居中的文字</p>
  </div>
</div>

.container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  display: inline-block;
}

其中，父元素.container也要先规定好高度，然后使用display: flex;align-items: center;就能实现所有的直接子元素垂直居中。

三、absolute+transform方式

我们还可以使用absolute+transform方式实现垂直居中，只需要这样写：

<div class="container">
  <div class="child">
    <p>这里是要垂直居中的文字</p>
  </div>
</div>

.container {
  position: relative;
  height: 300px;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
}

其中，父元素.container要先设置定位方式为absolute和高度，子元素.child则使用定位方式absolute、top:50%和transform: translateY(-50%);就能实现垂直居中效果了。只不过要注意，这个方法只能用于已知高度和宽度的元素进行垂直居中。

四、line-height方式

对于行内元素而言，还有一种更容易上手的垂直居中方法：line-height。

代码如下：

<p class="box">这里是要垂直居中的文字</p>

.box {
  height: 100px;
  line-height: 100px;
}

其中，设置好元素高度后，将line-height设置为相同的高度，就能实现垂直居中。

五、表格单元格方法

最后，还有一种方法是使用表格单元格方式实现垂直居中。代码如下：

<table class="table">
  <tbody>
    <tr>
      <td class="cell">这里是要垂直居中的文字</td>
    </tr>
  </tbody>
</table>

.table {
  height: 300px;
  border-collapse: collapse;
}

.cell {
  text-align: center;
  vertical-align: middle;
}

其中，使用table标签、border-collapse: collapse;隐藏边框后，再将单元格td的vertical-align: middle;，就能实现单元格内的元素垂直居中。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/182997.html