[译]关于垂直居中 Vertical Align 的探讨

lscho 发布于2019-08-30 13:04 / 2409人阅读

摘要：为子元素设置属性和，令子元素的顶部在纵向上与父元素中间的位置对齐。为子元素设置属性，其中为子元素高度值的一半，相当于再将子元素向上移动其本身高度的一半距离，这样就可以令其垂直居中了。

原文出处：Understanding vertical-align, or "How (Not) To Vertically Center Content"

“如何垂直居中某个元素”，以及“vertical-align: middle; 为什么不起作用”，是两个很常见的问题，究其原因，要分为下面三点来讲述：

HTML 的布局本是为水平方向的排版来设计的，内容都是根据指定的宽度以及该宽度下所对应的高度（设置了高宽比）来显示的。所以，水平方向上的尺寸调整和布局轻而易举，而垂直方向上的则要以水平方向为准。

vertical-align: middle; 之所以不起作用，是因为使用者并没有真正理解它，但是……

使用者之所以没有理解这个属性，是因为 CSS 定义就把这事儿弄砸了——在不同的应用环境中，它会表现出两种不同的结果。

应用于表格单元格的 vertical-align

这个属性应用于表格单元格时，通常都能得到我们想要的结果，该属性模拟的是已经弃用的旧属性 valign。在支持新标准的现代浏览器中，下面三行语句实现的效果是一样的：

  
 ... 
 ...

应用于行内元素的 vertical-align

当这个属性应用于行内元素时，它的表现形式与已经弃用的、应用于元素的旧属性 align 相同。在支持新标准的现代浏览器中，下面三行语句实现的效果是一样的：



 foo
bar

应用于其它元素的 vertical-align

从技术上来讲，其它元素没有该属性。当新手给普通的块状元素（比如

）分配该属性时，大部分浏览器会给这个块状元素的所有行内子元素设置该属性的值为 inherit。

如何使元素垂直居中？ 方法一

要实现垂直居中，需要满足两个前提条件：

要设置垂直居中元素的高度，并且为其再添加一个父级块元素（也需设置高度，这点原文未作说明）。

对内容块设置绝对定位不会出现问题。（一般来说都没什么问题，因为父级的块元素还是处在正常的文档流中的。）

如果能够满足以上两点，那么可以通过以下几步设置来实现元素的垂直居中：

设置父容器的属性为 position: relative or position: absolute。

为垂直居中的子元素设置一个固定的宽度。

为子元素设置属性 position:absolute 和 top:50%，令子元素的顶部在纵向上与父元素中间的位置对齐。

为子元素设置属性 margin-top:-yy，其中 yy 为子元素高度值的一半，相当于再将子元素向上移动其本身高度的一半距离，这样就可以令其垂直居中了。

下面是示例代码：


...

  
    Hey look! I"m vertically centered!
    How sweet is this?!

方法二

这个方法也需要满足两个前提条件：

要被居中的文本只有一行。

可以为（文本所属的）父元素（如

）设置定宽。

满足上面的前提条件之后，只需再加一步即可实现垂直居中：

为父元素设置合理的宽度。

下面是示例代码：

...

Hey, this is vertically centered. Yay!

GPU云服务器云服务器垂直居中实现垂直居中水平垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115279.html

[译]CSS 居中（Center）方法大合集

摘要：并排显示，要求相同高度如果要求多个块级元素并排居中且高度相同，则要为其父元素设置属性。成一列显示如果只是需要让多个块级元素整体水平居中，并且按默认的方式纵向排列，那直接设置左右边距为即可。原文出处：Centering in CSS: A Complete Guide 本文只给出了不同条件下的实现方式，未对原理做探讨。PS：原来要显示 jsfiddle 和 CodePen 之类网站的代...

wayneli 2019-08-30 13:04 评论0 收藏0
vertical-align 简明指南

摘要：部分样式代码总结因为用的不多其他对齐方式并没有举例。起因内容垂直居中在前端布局中, 是经常遇到的需求。虽然可以用浮动 float、position:absolute、来解决, 不过文档流都会受到影响。笔者常用的是 flex, 用起来顺手, 有些地方用起来感觉小题大做, 于是就来探究一下 vertical-align 如何做到居中布局。初探要明白 vertical-align...

MSchumi 2019-08-02 15:29 评论0 收藏0
vertical-align 简明指南

摘要：部分样式代码总结因为用的不多其他对齐方式并没有举例。起因内容垂直居中在前端布局中, 是经常遇到的需求。虽然可以用浮动 float、position:absolute、来解决, 不过文档流都会受到影响。笔者常用的是 flex, 用起来顺手, 有些地方用起来感觉小题大做, 于是就来探究一下 vertical-align 如何做到居中布局。初探要明白 vertical-align...

wqj97 2019-08-30 11:19 评论0 收藏0
从一个内联元素布局引发对line-height的探讨

摘要：从一个内联元素布局引发对的探讨一前言这个属性对于各位前端的小伙伴来说并不陌生。对于块级元素，它指定元素行盒的最小高度。对于非替代的元素，它用于计算行盒的高度。如存在属性的六总结以上就是本人对行内布局以及的一些思考总结。从一个内联元素布局引发对line-height的探讨一、前言 line-height这个属性对于各位前端的小伙伴来说并不陌生。在之前写页面的时候碰到过一个该属性相关的...

henry14 2019-08-30 15:44 评论0 收藏0