原文: How to Center Anything with CSS - Align a Div, Text, and More
引言
居中布局是 CSS 知识点中最难的之一。
居中方式本身不难理解,只是居中方式太多,难以判断应该用哪个、怎么用。
你需要考虑要让哪个 HTML 元素居中,以及让它水平还是垂直居中,以选择相应的居中方式。
这篇文章会介绍如何水平、垂直、水平且垂直居中不同的元素。
如何水平居中
元素的水平居中比垂直居中简单一点。在日常工作中,你可能需要水平居中以下元素,可以采用以下不同方式。
使用 CSS Text-Align 属性居中文本
要水平居中文本或者链接,可以使用 text-align
属性,将值设置为 center
:
<div class="container">
<p>Hello, (centered) World!</p>
</div>
p {
text-align: center;
}
使用 CSS Margin Auto 居中 Div
一个简短的写法是将 margin
属性的值设置为 0 auto
,即可水平居中块元素,如div
:
<div class="container">
<div class="child"></div>
</div>
.child {
...
margin: 0 auto;
}
用 Flexbox 水平居中 Div
Flexbox 是最现代的居中方式,使响应式布局的实现比以前更简单。但是,有些旧版浏览器(比如 Internet Explorer)不能完全支持 Flexbox。
要使用 Flexbox 水平居中元素,直接在父级元素使用 display: flex
和 justify-content: center
:
<div class="container">
<div class="child"></div>
</div>
.container {
...
display: flex;
justify-content: center;
}
如何垂直居中
不使用 Flexbox 这样的现代方式而垂直居中元素是真的挺麻烦的。下面我们先用一些比较老的方法垂直居中元素,然后使用 Flexbox 试试看。
如何用 CSS 绝对定位和负边距垂直居中 Div
在此前很长一段时间内,开发人员使用这个方法让元素垂直居中。要使用这个方法,你必须知道需要居中的元素的高。
首先,设置父元素的 display
属性值为 relative
。
然后把子元素的 position
的值设置为 absolute
,top
属性的值设置为 50%
。
<div class="container">
<div class="child"></div>
</div>
.container {
...
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically */
position: absolute;
top: 50%;
}
不过这样只是垂直居中了子元素的上边沿。
要真正居中子元素,需要设置 margin-top
属性的值为 -(half the child element's height)
:
.container {
...
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically */
position: absolute;
top: 50%;
margin-top: -25px; /* half this element's height */
}
用 Transform 和 Translate 垂直居中 Div
在不知道元素高的情况下(甚至是知道高),可以使用一个很有技巧的方法垂直居中元素。
这个方法和负边距方法类似,设置父元素的 display
属性值为 relative
。
对于子元素,设置 display
属性值为 absolute
,设置 top
属性值为 50%
。接下来,不使用负边距居中子元素,而是使用 transform: translate(0, -50%)
:
<div class="container">
<div class="child"></div>
</div>
.container {
...
position: relative;
}
.child {
...
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
注意 translate(0, -50%)
是 translateX(0)
和 translateY(-50%)
的简写。你也可以写成 transform: translateY(-50%)
,来垂直居中子元素。
用 Flexbox 垂直居中 Div
就像水平居中元素一样,Flexbox 使垂直居中元素变得超级简单。
设置父元素的属性值为 display: flex
和 align-items: center
,即可真正垂直居中元素:
<div class="container">
<div class="child"></div>
</div>
.container {
...
display: flex;
align-items: center;
}
如何垂直且水平居中元素
用 CSS 绝对定位和负边距使元素垂直且水平居中
这个方法和上面垂直居中元素的方法非常类似。你需要知道需要居中的元素的宽和高。
设置父元素的 display
属性值为 relative
。
然后设置子元素的 display
属性值为 absolute
,top
属性值为 50%
,left
属性值为 50%
。这样只是将子元素的左上角垂直且水平居中。
要真正地居中子元素,需要用子元素高的一半设置一个负的顶部边距值,同时使用子元素宽的一半设置一个负的左边距值:
<div class="container">
<div class="child"></div>
</div>
.container {
...
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically and horizontally */
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */
}
如何使用 Transform 和 Translate 垂直且水平居中 Div
如果你不知道具体的尺寸,也不能使用 Flexbox,那么你可以使用这个方法来垂直且水平居中一个元素。
首先,设置父元素的 display
属性值为 relative
。
然后,设置子元素的 display
属性值为 absolute
,top
值为 50%
,left
值 50%
。
最后,使用 transform: translate(-50%, -50%)
真正居中子元素:
<div class="container">
<div class="child"></div>
</div>
.container {
...
position: relative;
}
.child {
...
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
如何使用 Flexbox 垂直且水平居中 Div
Flexbox 是垂直且水平居中元素的最简单的方式。
这个方法结合了上面提过的两种 Flexbox 方式,然后使用 justify-content: center
和 align-items: center
垂直且水平居中子元素:
<div class="container">
<div class="child"></div>
</div>
.container {
...
display: flex;
justify-content: center;
align-items: center;
}
以上就是一些最好用的居中方法。现在,你可以试试看居中元素了。