css垂直居中对齐-H5文本垂直居中_CSS中元素居中的方式

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

, .

方法一：设置margin属性为auto

下面两种写法效果是一样的。 写入方法一是同时设置四个方向的页边距。 如果使用方法2，则可以将margin-top和margin-bottom设置为其他值。

div 

margin: auto 只能实现水平居中css垂直居中对齐，不能实现垂直居中。 因为当margin-top和margin-bottom的属性为auto时，它们实际上是顶部对齐的。

方法二：以百分比表示宽度和边距

元素的范围由margin、border、padding、content（中心内容）组成。 为了方便，将border和padding设置为0，然后只需要调整内容的宽度和边距即可实现水平居中。

水平居中原理：边距百分比 x 2 + 宽度百分比 = 100%

水平居中示例代码功效

#

但是，如果要使用类似的垂直居中原理（边距百分比 x 2 + 高度百分比 = 100%），效果就会错误。 div#child的高度和行距其实就是我们想要的值，但是div#child的行距超出了div#parent的范围。 div#child 始终与 div#parent 的顶部对齐。 因此，以百分比表示宽度和边距的方法仅适用于水平居中。

垂直居中示例代码功效

实际#child元素的边距范围（橙色区域）

/* 这是一段实现不了垂直居中的css */

方法3：使用flexbox特性

flexbox水平和垂直居中都没有问题。 步骤如下：

将容器设置为flexbox，指定容器中包含的元素的水平中心，使用 justify-content: center 指定容器中包含的元素的垂直中心，使用align-items: center

flexbox：水平+垂直居中

#

如果要将容器中的多个元素（#sub-item1、#sub-item2、#sub-item3，...）居中，同时保持原始布局，则需要使用

将多个元素包裹起来使它们成为一个整体（即#item）。 然后将其全部放在容器内。

<

如果你没有将多个元素包装到一个div#item中，flexbox会按照指定的方向（沿着行/列）堆叠这些元素css垂直居中对齐，破坏了这些元素之间的布局关系。

方法四：使用css进行2D变换---translate()

这也是水平和垂直居中的一种方法。

想象一下，元素的左上角有一个坐标轴，x轴正方向向右，y轴正方向向下。 translate(deltaX, deltaY) 的两个参数是元素相对于起始位置沿x轴和y轴正方向的位移。

要将元素垂直居中，令 deltaY = (容器高度 - 项目高度) / 2

同样，要水平居中，请设置 deltaX = (容器长度 - 项目长度) / 2

垂直居中示例代码功效

#