王鹏飞

Blog

Tutorial

About

CSS

2021年8月10日

最全面的CSS元素居中教程

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

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

一.水平居中

内联元素

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

.ele {
    text-align: center;
}

块级元素

单个块级元素

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

.ele {
    margin: 0 auto;
}

多个块级元素

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

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

通过弹性布局(flex)居中元素。

二.垂直居中

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

内联元素

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

单行文本

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

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

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

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

多行文本

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

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

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

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

块级元素

元素高度已知

高度已知的情况下,可以通过设置position: absolutetopmargin-top属性达到居中效果。

.parent {
    position: relative;
}

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

元素高度未知

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

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

元素高度可以被拉伸

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

使用弹性布局

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

三.总结

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

(完)

【css教程】010 grid布局
【css教程】011 逻辑属性

留言(0


发表评论

邮箱地址不会被公开。*表示必填项