CSS 垂直对齐方式有哪些，附示例代码

11月23日 17时40分更新

110

CSS中有很多垂直对齐的方式，以下是其中一些常见的方法：比如：Flex布局、Line-height法、Padding法、Position属性、Table布局、Margin负值等等，下边源码码网一一举例说明。

1、Flex布局：使用flex布局可以非常方便地实现垂直对齐。例如，在容器上添加属性align-items: center可以将子元素垂直居中。

.container {
  display: flex;
  align-items: center;
}

2、Line-height法：如果文本的行数只有一行，可以通过设置line-height属性与容器高度相同来实现垂直居中。

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

3、Padding法：通过设置padding属性来实现垂直居中。

.container {
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0 10px;
}

4、Position属性：通过设置元素的position属性为absolute或fixed，然后使用transform属性将其向上或向下移动一定距离来实现垂直居中。

.container {
  position: relative;
}


.element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

5、Table布局：通过将容器设置为display: table，将子元素设置为display: table-cell并设置vertical-align: middle来实现垂直居中。

.container {
  display: table;
}


.element {
  display: table-cell;
  vertical-align: middle;
}

6、Margin负值：通过将子元素设置为绝对定位，设置top属性为50%，并将margin-top设置为负值，使其向上移动50%的距离来实现垂直居中心。

.container {
  position: relative;
}


.element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

以上是一些常见的垂直对齐方式，具体使用哪种方式要根据你的需求和实际情况来决定。关注源码码网，了解更多编程知识！

评分

欢迎为Ta评分