CSS 布局 - 水平和垂直对齐

文本居中对齐

使用 text-align: center; 可以让元素内的文本保持居中。

.center {
  text-align: center;
  border: 3px solid green;
}

进入 CSS 文本章节查看更多关于文本格式的信息。

居中对齐元素

使用 margin: auto; 可以让块元素水平居中。

居中的 <div> 元素：

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

!! 注意： 如果未设置 width 属性（或设置为 100%），则居中对齐无效。

图像居中

要使图像居中，可以图像的显示方式设为 block，将左右外边距设置为 auto。

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

使用定位实现对齐

使用绝对定位 position: absolute; 可以让元素对齐到你想要的位置。

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73ad21;
  padding: 10px;
}

!! **注意：**绝对定位元素从正常流中移除，并且可能与元素重叠。

使用浮动左右对齐

也可以使用 float 属性让元素左右对齐。

.right {
  float: right;
  width: 300px;
  border: 3px solid #73ad21;
  padding: 10px;
}

如果一个元素比包含它的元素高，并且它是浮动的，它将溢出到它的容器之外。我们可以在包含元素中添加 clearfix hack 来解决浮动溢出的问题。

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

使用内边距设置垂直居中

在 CSS 中有很多方法可以使元素垂直居中。一个简单的解决方案是设置相同的顶部和底部内边距。

我垂直居中。

.center {
  padding: 70px 0;
  border: 3px solid green;
}

要垂直和水平居中，请使用 padding 和 text-align: center ：

我垂直和水平居中。

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

使用 `line-height` 设置垂直居中

设置垂直居中的将 line-height 等于 height。

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* 如果是多行文本，添加下面的样式声明 */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

使用定位和转换设置垂直居中

另一种垂直居中解决方案是使用定位和 transform 属性：