/

如何使用CSS居中元素

如何使用CSS居中元素

使用CSS居中元素，有些元素容易操作，有些则比较困难。下面是完整的如何使用CSS居中的方法，包括现代CSS技术。

在CSS中居中元素的方法在水平和垂直方向上是非常不同的。

在本文中，我将解释最常见的情况以及如何解决它们。如果Flexbox 提供了一种新的解决方案，我将忽略旧的技术，因为我们需要向前发展，而且Flexbox已经得到了浏览器的支持，包括IE10。

水平居中

文本

文本可以通过将text-align属性设置为center来实现水平居中：

1
2
3
p {
 text-align: center;
}

块级元素

居中任何非文本块级元素的现代方法是使用Flexbox：

1
2
3
4
#mysection {
 display: flex;
 justify-content: center;
}

#mysection内的任何元素都将水平居中。

水平居中

以下是不使用Flexbox的替代方法。

任何非文本类型的元素都可以通过为左右自动设置外边距并设置元素的宽度来居中：

1
2
3
4
section {
 margin: 0 auto;
 width: 50%;
}

上述的margin: 0 auto;是以下缩写方式的简写：

1
2
3
4
5
6
section {
 margin-top: 0;
 margin-bottom: 0;
 margin-left: auto;
 margin-right: auto;
}

如果元素是内联元素，请记得将其设置为display: block。

垂直居中

传统上，垂直居中一直是一项困难的任务。通过Flexbox，我们现在可以以最简单的方式实现这一目标：

1
2
3
4
#mysection {
 display: flex;
 align-items: center;
}

#mysection内的任何元素都将垂直居中。

垂直居中

同时垂直和水平居中

垂直和水平居中的Flexbox技巧可以结合在一起，完全将元素居中在页面中：

1
2
3
4
5
#mysection {
 display: flex;
 align-items: center;
 justify-content: center;
}

同时垂直和水平居中

同样的效果也可以使用CSS Grid来实现：

1
2
3
4
5
body {
 display: grid;
 place-items: center;
 height: 100vh;
}

tags: [“css”, “flexbox”, “css-grid”, “centering”, “horizontal-center”, “vertical-center”]