使用CSS完成元素居中的七种方法-富录

在网页上使 HTML 元素居中看似一件很简单的事情。至少在某些情况下是这样的，但是复杂的布局往往使一些解决方案不能很好地发挥作用。

在网页布局中，元素水平居中比元素垂直居中要简单不少，同时实现水平居中和垂直居中往往是最难的。现在是响应式设计的时代，我们很难确切知道元素的准确高度和宽度，所以一些方案不大适用。据我所知，在 CSS 中至少有六种实现居中的方法。我将使用下面的 HTML 结构从简单到复杂开始讲解：

<div class="center">
   <img src="jimmy-choo-shoe.jpg" alt>
</div>

鞋子图片会改变，但是它们都会保持 500px × 500px 的大小。HSL colors 用于使背景颜色保持一致。

使用 text-align 水平居中

有时显而易见的方案是最佳的选择：

div.center {
   text-align: center;
   background: hsl(0, 100%, 97%);
}
div.center img {
   width: 33%; height: auto;
}

这种方案没有使图片垂直居中：你需要给 <div> 添加 padding 或者给内容添加 margin-top 和 margin-bottom 使容器与内容之间有一定的距离。

使用 margin: auto 居中

这种方式实现水平居中，与上面使用 text-align 的方法有相同局限性。

div.center {
   background: hsl(60, 100%, 97%);
}
div.center img {
   display: block;
   width: 33%;
   height: auto;
   margin: 0 auto;
}

注意： 必须使用 display: block 使 margin: 0 auto 对 img 元素生效。

使用 table-cell 居中

使用 display: table-cell，而不是使用 table 标签，可以实现水平居中和垂直居中，但这种方法需要添加额外的元素作为外部容器。

<div class="center-aligned">
   <div class="center-core">
       <img src="jimmy-choo-shoe.jpg">
   </div>
</div>

.center-aligned {
   display: table;
   background: hsl(120, 100%, 97%);
   width: 100%;
}
.center-core {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}
.center-core img {
   width: 33%;
   height: auto;
}

注意： 为了使 <div> 不折叠，必须加上 width: 100%，外部容器元素也需要加上一定高度使内容垂直居中。给 html 和 body 设置高度后，也可以使元素在 body 中垂直居中。此方法在 IE8+ 浏览器上生效。

使用 absolute 定位居中

这种方案有非常好的跨浏览器支持。有一个缺点是必须显式声明外部容器元素的 height：

.absolute-aligned {
   position: relative;
   min-height: 500px;
   background: hsl(200, 100%, 97%);
}
.absolute-aligned img {
   width: 50%;
   min-width: 200px;
   height: auto;
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0;
   bottom: 0; right: 0;
}

使用 translate 居中

Chris Coiyer 提出了一个使用 CSS transforms 的新方案，同样支持水平居中和垂直居中：

.center {
   background: hsl(180, 100%, 97%);
   position: relative;
   min-height: 500px;
}
.center img {
   position: absolute;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
   width: 30%; height: auto;
}

缺点：

CSS transform 在部分旧浏览器上需要使用前缀。
不支持 IE9 以下的浏览器。
外部容器需要设置高度（或者用其他方式设置），因为不能获取绝对定位内容的高度。
如果内容包含文字，现在的浏览器合成技术会使文字模糊不清。

使用 Flexbox 居中

当新旧语法差异和浏览器前缀消失时，这种方法会成为主流的居中方案。

.center {
   background: hsl(240, 100%, 97%);
   display: flex;
   justify-content: center;
   align-items: center;
}
.center img {
   width: 30%; height: auto;
}

在很多方面，Flexbox 是一种简单的方案。但是，它有新旧两种语法以及早期版本的 IE 缺乏支持（尽管可以使用 display: table-cell 作为降级方案）。

使用 calc 居中

在某些情况下比 Flexbox 更全面：

.center {
   background: hsl(300, 100%, 97%);
   min-height: 600px;
   position: relative;
}
.center img {
   width: 40%;
   height: auto;
   position: absolute;
   top: calc(50% - 20%);
   left: calc(50% - 20%);
}

计算公式为：

top: calc(50% - (40% / 2));
left: calc(50% - (40% / 2));

在现代浏览器中，这种方法适用于内容宽高为固定尺寸的场景：

.center img {
   width: 500px; height: 500px;
   position: absolute;
   top: calc(50% - (300px / 2));
   left: calc(50% - (300px / 2));
}

这种方案和 Flex 一样有许多相同的缺点：尽管在现代浏览器中有良好的支持，但在较早的版本中仍需要浏览器前缀，并且不支持 IE8。

当然还有其他更多的方案。理解这七种方案之后，Web 开发人员在面对元素居中的时候会有更多选择。

目录CONTENT

使用CSS完成元素居中的七种方法