CSS 布局 - 水平 & 垂直对齐

在 web 开发中，对于页面元素的水平和垂直对齐是非常重要的。通过 CSS 布局，我们可以轻松地控制元素在页面中的位置和对齐方式。在本章节中，我们将学习如何实现水平和垂直对齐。

水平对齐

文本水平对齐

在 CSS 中，我们可以使用 text-align 属性来控制文本的水平对齐方式。常用的取值包括 left（左对齐）、center（居中对齐）、right（右对齐）。

示例代码：

.text-center {
  text-align: center;
}

<p class="text-center">这是居中对齐的文本</p>

元素水平居中

要实现元素的水平居中，可以使用以下方法之一：

1. 使用 margin 属性

.center {
  margin: 0 auto;
}

<div class="center">这个元素会水平居中</div>

2. 使用 Flexbox 布局

.container {
  display: flex;
  justify-content: center;
}

<div class="container">
  <div>这个元素会水平居中</div>
</div>

垂直对齐

元素垂直居中

要实现元素的垂直居中，可以使用以下方法之一：

1. 使用 Flexbox 布局

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

<div class="container">
  <div>这个元素会垂直居中</div>
</div>

2. 使用 CSS Grid 布局

.container {
  display: grid;
  place-items: center;
}

<div class="container">
  <div>这个元素会垂直居中</div>
</div>

元素底部对齐

要实现元素底部对齐，可以使用以下方法：

.bottom {
  position: absolute;
  bottom: 0;
}

<div class="bottom">这个元素会底部对齐</div>

以上是关于 CSS 布局中水平和垂直对齐的一些常用方法，希望对你有所帮助。在实际项目中，根据具体需求选择合适的方式进行布局对齐。