We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
主要摘自:《CSS 揭秘》一书
“44 年前我们就把人类送上月球了,但现在我们仍然无法在 CSS 中 实现垂直居中。” ——James Anderson(https://twitter.com/jsa/ status/358603820516917249)
“44 年前我们就把人类送上月球了,但现在我们仍然无法在 CSS 中 实现垂直居中。”
——James Anderson(https://twitter.com/jsa/ status/358603820516917249)
在 CSS 中对元素进行水平居中是非常简单的:如果它是一个行内元素, 就对它的父元素应用 text-align: center; 如果它是一个块级元素,就对它自身应用 margin: auto。然而如果要对一个元素进行垂直居中,可能光是想想就令人头皮发麻了。
text-align: center;
margin: auto
长久以来,为了解决这一绝世难题,前端开发者们殚精竭虑,琢磨出了各种解决方法,可惜大多数并不实用。在本篇攻略中,我们将探索现代 CSS 的强大威力,以全新的思路去攻克各种场景下的垂直居中难题。请注意,有几种技巧十分流行,但在这里并不会深入探讨,原因如下:
如果你有兴趣,可以去看看 Chris Coyier 写的 Centering in the Unknown。这篇出色的文章详细讲述了这两种技巧。
我们将使用如下所示的结构代码,并直接插入 元素中(但实际上我们将要探索的这些技巧是与容器无关的):
<main> <h1>Am I centered yet?</h1> <p>Center me, please!</p> </main>
我们先来看一个早期的垂直居中方法,它要求元素具有固定的宽度和高度:
main { position: absolute; top: 50%; left: 50%; margin-top: -3em; /* 6/2 = 3 */ margin-left: -9em; /* 18/2 = 9 */ width: 18em; height: 6em; }
这段代码在本质上做了这样几件事情:
借助强大的 calc() 函数,这段代码还可以省掉两行声明:
calc()
main { position: absolute; top: calc(50% - 3em); left: calc(50% - 9em); width: 18em; height: 6em; }
显然,这个方法最大的局限在于它要求元素的宽高是固定的。
在通常情况下,对那些需要居中的元素来说,其尺寸往往是由其内容来决定的。如果 能找到一个属性的百分比值以元素自身的宽高作为解析基准,那我们的难题就迎刃而解了!遗憾的是,对于绝大多数 CSS 属性(包括 margin)来说, 百分比都是以其父元素的尺寸为基准进行解析的。
CSS 领域有一个很常见的现象,真正的解决方案往往来自于我们最意想不到的地方。
在这个例子中,答案来自于 CSS Transforms 。当我们在 translate() 变形函数中使用百分比值时,是以这个元素自身的宽度和高度为基准进行换算和移动的,而这正是我们所需要的。接下来,只要换用基于百分比的 CSS 变形来对元素进行偏移,就不需要在偏移量中把元素的尺寸写死。这样我们就可以彻底解除对固定尺寸的依赖:
translate()
main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
可以看到,这个容器已经完美居中了,完全满足我们的期望。
当然,没有任何技巧是十全十美的,上面这个方法也有一些需要注意的地方:
transform- style: preserve-3d
线上例子:http://dabblet.com/gist/cd12fac0e18bb27fb62d
http://dabblet.com/gist/cd12fac0e18bb27fb62d
假设我们不想使用绝对定位,仍然可以采用 translate() 技巧来把这 个元素以其自身宽高的一半为距离进行移动;但是在缺少 left 和 top 的情况下,如何把这个元素的左上角放置在容器的正中心呢?
我们的第一反应很可能是用 margin 属性的百分比值来实现,就像这样:
main { width: 18em; padding: 1em 1.5em; margin: 50% auto 0; transform: translateY(-50%); }
不过,如图所示,这段代码会产生十分离谱的结果:
原因在于 margin 的百分比值是以父元素的宽度作为解析基准的 。没错,即使对于 margin-top 和 margin-bottom 来说也是这样!
margin-top
margin-bottom
不过幸运的是,如果只是想把元素相对于视口进行居中,仍然是有希望的。CSS Values and Units Module Level 3 定义了一套新的单位,称为 viewport 相关的长度单位。
在我们的这个例子中,适用于外边距的是 vh 单位:
main { width: 18em; padding: 1em 1.5em; margin: 50vh auto 0; transform: translateY(-50%); }
可以看到,其效果堪称完美。当然,这个技巧的实用性是相当有限的,因为它只适用于在视口中居中的场景。
线上例子:http://dabblet.com/gist/bf12b39d8f5da2b6e5b6
http://dabblet.com/gist/bf12b39d8f5da2b6e5b6
这是毋庸置疑的最佳解决方案,因为 [Flexbox](http://w3.org/ TR/css-flexbox) 是专门针对这类需求所设计的。我们之所以要讨论其他方案,仅仅是因为那些方案在浏览器的支持程度上稍微好一些而已。但其实目前现代浏览器对 Flexbox 的支持度已经相当不错了。
我们只需写两行声明即可:
display: flex
<body>
<main>
body { display: flex; min-height: 100vh; margin: 0; } main { margin: auto; }
请注意,当我们使用 Flexbox 时,margin: auto 不仅在水平方向上将元素居中,垂直方向上也是如此。还有一点,我们甚至不需要指定任何宽度(当然,如果需要的话,也是可以指定的):这个居中元素分配到的宽度等于 max-content。
max-content
如果浏览器不支持 Flexbox,页面渲染结果看起来就跟我们的起点图是一样的了(如果设置了宽度的话)。虽然没有垂直居中效果,但也是完全可以接受的。
Flexbox 的另一个好处在于,它还可以将匿名容器(即没有被标签包裹的文本节点)垂直居中。举个例子,假设我们的结构代码是:
<main>Center me, please!</main>
我们先给这个 main 元素指定一个固定的尺寸,然后借助 Flexbox 规范 所引入的 align-items 和 justify-content 属性,我们可以让它内部的文本也实现居中:
align-items
justify-content
main { display: flex; align-items: center; justify-content: center; width: 18em; height: 10em; }
线上例子:http://play.csssecrets.io/vertical-centering-vh
http://play.csssecrets.io/vertical-centering-vh
根据 CSS Box Alignment Module Level 3 的计划,在未来,对于简单的垂直居中需求, 我们完全不需要动用特殊的布局模式了。因为只需要下面这行代码就可以搞定:
align-self: center;
不管这个元素上还应用了其他什么属性,这样写就够了。这听起来可能难以置信,但或许你电脑上的浏览器很快就会让它成为现实。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
在 CSS 中对元素进行水平居中是非常简单的:如果它是一个行内元素, 就对它的父元素应用
text-align: center;
如果它是一个块级元素,就对它自身应用margin: auto
。然而如果要对一个元素进行垂直居中,可能光是想想就令人头皮发麻了。长久以来,为了解决这一绝世难题,前端开发者们殚精竭虑,琢磨出了各种解决方法,可惜大多数并不实用。在本篇攻略中,我们将探索现代 CSS 的强大威力,以全新的思路去攻克各种场景下的垂直居中难题。请注意,有几种技巧十分流行,但在这里并不会深入探讨,原因如下:
如果你有兴趣,可以去看看 Chris Coyier 写的 Centering in the Unknown。这篇出色的文章详细讲述了这两种技巧。
我们将使用如下所示的结构代码,并直接插入 元素中(但实际上我们将要探索的这些技巧是与容器无关的):
基于绝对定位
我们先来看一个早期的垂直居中方法,它要求元素具有固定的宽度和高度:
这段代码在本质上做了这样几件事情:
借助强大的
calc()
函数,这段代码还可以省掉两行声明:显然,这个方法最大的局限在于它要求元素的宽高是固定的。
在通常情况下,对那些需要居中的元素来说,其尺寸往往是由其内容来决定的。如果 能找到一个属性的百分比值以元素自身的宽高作为解析基准,那我们的难题就迎刃而解了!遗憾的是,对于绝大多数 CSS 属性(包括 margin)来说, 百分比都是以其父元素的尺寸为基准进行解析的。
CSS 领域有一个很常见的现象,真正的解决方案往往来自于我们最意想不到的地方。
在这个例子中,答案来自于 CSS Transforms 。当我们在
translate()
变形函数中使用百分比值时,是以这个元素自身的宽度和高度为基准进行换算和移动的,而这正是我们所需要的。接下来,只要换用基于百分比的 CSS 变形来对元素进行偏移,就不需要在偏移量中把元素的尺寸写死。这样我们就可以彻底解除对固定尺寸的依赖:可以看到,这个容器已经完美居中了,完全满足我们的期望。
当然,没有任何技巧是十全十美的,上面这个方法也有一些需要注意的地方:
transform- style: preserve-3d
来修复,不过这个修复手段也可以认为是一个 hack,而且很难保证它在未来不会出问题。基于 viewport
假设我们不想使用绝对定位,仍然可以采用
translate()
技巧来把这 个元素以其自身宽高的一半为距离进行移动;但是在缺少 left 和 top 的情况下,如何把这个元素的左上角放置在容器的正中心呢?我们的第一反应很可能是用 margin 属性的百分比值来实现,就像这样:
不过,如图所示,这段代码会产生十分离谱的结果:
原因在于 margin 的百分比值是以父元素的宽度作为解析基准的 。没错,即使对于
margin-top
和margin-bottom
来说也是这样!不过幸运的是,如果只是想把元素相对于视口进行居中,仍然是有希望的。CSS Values and Units Module Level 3 定义了一套新的单位,称为 viewport 相关的长度单位。
在我们的这个例子中,适用于外边距的是 vh 单位:
可以看到,其效果堪称完美。当然,这个技巧的实用性是相当有限的,因为它只适用于在视口中居中的场景。
基于 Flexbox
这是毋庸置疑的最佳解决方案,因为 [Flexbox](http://w3.org/ TR/css-flexbox) 是专门针对这类需求所设计的。我们之所以要讨论其他方案,仅仅是因为那些方案在浏览器的支持程度上稍微好一些而已。但其实目前现代浏览器对 Flexbox 的支持度已经相当不错了。
我们只需写两行声明即可:
display: flex
(在这个例子中是<body>
元素)margin: auto
(在这个例子中是<main>
元素):请注意,当我们使用 Flexbox 时,margin: auto 不仅在水平方向上将元素居中,垂直方向上也是如此。还有一点,我们甚至不需要指定任何宽度(当然,如果需要的话,也是可以指定的):这个居中元素分配到的宽度等于
max-content
。如果浏览器不支持 Flexbox,页面渲染结果看起来就跟我们的起点图是一样的了(如果设置了宽度的话)。虽然没有垂直居中效果,但也是完全可以接受的。
Flexbox 的另一个好处在于,它还可以将匿名容器(即没有被标签包裹的文本节点)垂直居中。举个例子,假设我们的结构代码是:
我们先给这个 main 元素指定一个固定的尺寸,然后借助 Flexbox 规范 所引入的
align-items
和justify-content
属性,我们可以让它内部的文本也实现居中:关于未来
根据 CSS Box Alignment Module Level 3 的计划,在未来,对于简单的垂直居中需求, 我们完全不需要动用特殊的布局模式了。因为只需要下面这行代码就可以搞定:
不管这个元素上还应用了其他什么属性,这样写就够了。这听起来可能难以置信,但或许你电脑上的浏览器很快就会让它成为现实。
参考
The text was updated successfully, but these errors were encountered: