块级元素的三种垂直水平居中的方法

下面我会详细讲解“块级元素的三种垂直水平居中的方法”的完整攻略。

下面我会详细讲解“块级元素的三种垂直水平居中的方法”的完整攻略。

块级元素

首先简单介绍下什么是块级元素。在HTML中，块状元素指在HTML中以块的形式排列的元素，主要特点是：

• 独占一行
• 每个块级元素都有默认的宽度，与父容器宽度相等
• 可以控制内外边距以及宽高
• 可以容纳其它块元素或行内元素等

在这篇攻略中，我们所介绍的均为块级元素的居中方式。

方法一：使用flex

在CSS中，flex是弹性盒子布局，用于在不同设备和屏幕大小下实现灵活的布局，也常用于实现元素的居中。使用flex居中有很多方式，这里我们介绍一种通用的方式，在容器上设置display:flex，align-items:center，justify-content:center，如下所示：

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

这里的align-items属性是设置垂直方向上的对齐方式，justify-content属性是设置水平方向上的对齐方式。

下面是一个实例，我们设置一个div容器，其中包含一个标题，应用上述CSS代码，可以实现标题在div容器中水平、垂直居中。

<div class="container">
  <h1>Hello World</h1>
</div>

你会发现这个标题被垂直、水平居中。

方法二：使用absolute

第二个方法是使用CSS的absolute属性，我们可以为要居中的元素设置绝对定位，同时设置top和left属性为50%，将元素向下、向右移动它自身宽度和高度的一半，使其处于父元素的中心。如下所示：

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这里的transform属性是将此元素水平或垂直平移，并可缩放整个元素。

下面是一个实例，我们设置一个容器，其中包含一个div，应用上述CSS代码，可以实现div在容器中水平、垂直居中。

<div class="container">
  <div class="center">Centered</div>
</div>

你会发现这个div被垂直、水平居中。

方法三：使用text-align和vertical-align

第三个方法是使用text-align和vertical-align属性实现元素的居中。text-align用于设置行内元素的水平对齐方式，而vertical-align用于设置行内元素的垂直对齐方式。对于块级元素，我们可以将它转换成行内元素，然后应用text-align和vertical-align属性。如下所示：

.container {
  text-align: center;
  /*为了让vertical-align生效，必须将line-height设置成容器的高度*/
  line-height: 300px;
}

.container span {
  /*为了让vertical-align生效，必须将display设置成inline-block*/
  display: inline-block;
  vertical-align: middle;
}

下面是一个实例，我们设置一个容器，其中包含一个span，应用上述CSS代码，可以实现span在容器中水平、垂直居中。

<div class="container">
  <span>Centered</span>
</div>

你会发现这个span被垂直、水平居中。

到这里，三种居中的方式已经介绍完毕，希望对你有所帮助。