CSS布局 - 水平和垂直对齐

水平对齐

在CSS中，你可以使用以下属性来控制元素的水平对齐：

• text-align 属性可以控制文本和内联元素在其父元素中的水平对齐方式。
• margin-left 和 margin-right属性可以控制块级元素在页面中水平对齐的位置。
• display 和 float 属性可以使元素在页面中水平地“漂浮”。

以下是一个使用text-align实现水平居中的例子：

.container {
  text-align: center;
}

.container > div {
  display: inline-block;
}

这个例子中，我们给包含容器指定了text-align: center属性，并将其内部的元素设置为display: inline-block，这会让子元素在容器中水平居中。

使用margin-left和margin-right属性可以控制块级元素在页面中水平对齐的位置。例如：

.container {
  margin: 0 auto;
  width: 80%;
}

这个例子中，我们使用margin属性将容器元素居中，并使用width属性来控制容器宽度。

垂直对齐

在CSS中，垂直对齐通常比水平对齐复杂一些。

使用display: table-cell

可以使用CSS中的display: table-cell属性将一个元素垂直居中。例如：

.container {
  display: table;
  height: 300px;
  width: 100%;
}

.container > div {
  display: table-cell;
  vertical-align: middle;
}

我们首先使用display: table将包含容器变成一个可包含表格单元格元素的表，然后将内部DIV元素的display设置为table-cell。最后，使用vertical-align属性控制单元格中内容的垂直对齐方式。

使用flexbox

使用CSS中的弹性盒子布局，也就是所谓的flexbox，可以轻松地将元素沿着一个轴线（一般为水平和垂直两个方向中的一个）排列。例如：

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

在这个例子中，我们给包含容器设置了display: flex，并使用align-items和 justify-content属性来控制元素在容器内的垂直对齐方式和水平对齐方式。

结论

在CSS中，水平和垂直对齐是现代web设计中非常重要的方面。我们可以通过使用text-align，margin，display和float等属性来控制元素的水平布局，而display: table-cell和flexbox则是我们实现垂直布局的有力工具。