最全面的CSS元素居中教程

最全面的CSS元素居中教程

文章中demo案例无法实时预览效果，可以在这里获得更好的阅读体验。

作为一名web开发者，你应该经常会遇到居中一个元素的场景，通常你会觉得居中一个元素会很困难。为什么一个简单的居中会如此困哪呢？我认为应该是需要居中的场景可能有很多，而每种场景的居中方式也不一样，所以造成了我们面临某个居中需求时，不知道采用什么方式去解决问题。

本节内容，我将各个场景细分，讨论每种场景的可用的居中方式。

一.水平居中

内联元素

内联元素，即inline或者inline-*的元素。居中一个内联元素可以使用text-align属性。

.ele {
    text-align: center;
}

See the Pen center inline elements by Pengfei Wang ( @AhCola) on CodePen.

块级元素

单个块级元素

如果块级元素设置了width，那么可以通过设置margin-left: auto和margin-right: auto，居中这个块级元素。可以使用以下简写方式：

.ele {
    margin: 0 auto;
}

See the Pen Center block elements by Pengfei Wang ( @AhCola) on CodePen.

多个块级元素

这里的多个块级元素指的是，你想要在同一行居中多个块级元素。如果每行只有一个块级元素居中，那么直接设置margin: 0 auto即可。同一行居中多个块级元素，最好的方法是改变它们的display属性，使块级元素变成inline-block，或者使用弹性布局（flex box）。

通过改变块级元素的display属性。

See the Pen Center multi blocks by Pengfei Wang ( @AhCola) on CodePen.

通过弹性布局（flex）居中元素。

See the Pen Center multi blocks(flex) by Pengfei Wang ( @AhCola) on CodePen.

二.垂直居中

垂直居中比水平居中要棘手一点。

内联元素

居中一个内联元素，我将情况分成两种，单行和多行。

单行文本

通常我们可以设置上内边距和下内边距相等，达到居中的效果。

.ele {
    padding-top: 20px;
    padding-bottom: 20px;
}

See the Pen verticle center inline elements by Pengfei Wang ( @AhCola) on CodePen.

还可以设置line-height等于height达到垂直居中的效果。

.ele {
    height: 100px;
    line-height: 100px;
    white-space: nowrap;
}

See the Pen verticle center inline elements2 by Pengfei Wang ( @AhCola) on CodePen.

多行文本

也可以通过设置上下边距相等的方式居中多行文本。但是如果这种方式不起作用，可以设置vertical-align属性使多行文本居中。

vertical-align可以指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。将容器设置为table，将内联元素设置为table-cell可以打到居中的效果。

See the Pen vetical-align by Pengfei Wang ( @AhCola) on CodePen.

比较推荐的方式是，使用弹性布局。

.ele {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 400px;
}

See the Pen verticle center use flex by Pengfei Wang ( @AhCola) on CodePen.

块级元素

元素高度已知

高度已知的情况下，可以通过设置position: absolute、top和margin-top属性达到居中效果。

.parent {
    position: relative;
}

.child {
    height: 200px;
    position: absolute;
    top: 50%;
    margin-top: -100px;
}

See the Pen verticle center_position by Pengfei Wang ( @AhCola) on CodePen.

元素高度未知

高度未知的情况，我们还是可以通过上面类似的方法达到居中的效果，不过这次通过设置transform: translateY(-50%)，来下移元素。

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

See the Pen verticle center position2 by Pengfei Wang ( @AhCola) on CodePen.

元素高度可以被拉伸

如果允许元素的高度被拉伸，仅让内容垂直居中，那么可以利用display: table方式使元素居中。

See the Pen verticle center ele(table like) by Pengfei Wang ( @AhCola) on CodePen.

使用弹性布局

当然你可以使用弹性布局，达到居中的效果。

三.总结

上面讲解了多种方式，不同场景下，选择的方式也不止一种，具体怎么去选择，需要自己去判断。我建议在遇到复杂的场景的情况下，可以优先考虑使用flex布局和grid布局去处理。

（完）