h5文字垂直居中_CSS中居中对齐元素的方法

文字

text-align属性作用于指定元素内的所有文字。例如以下代码令<p>元素中的所有文字居中对齐。

p 

inline-block元素

常见的inline-block对象是<img>, <span>。inline-block元素在默认设置中和inline元素一样，是可以在一行中连续排列的。令inline-block元素居中的第一步是将其转化为block元素，即保证一行只有这一个元素。

1. 使用display属性将inline-block转化为block。

img 

2. 接下来的步骤和block元素一样。

block元素

常见的block对象是<p>, <div>, <section>。

方法1：将margin属性设为auto

下面两种写法的效果是一样的。写法1是一次性把margin的四个方向都设置了。如果用写法2的话，可以把margin-top和margin-bottom设成其他数值。

div 

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

方法2：用百分数表示width, margin

一个元素的范围由margin, border, padding, content（中心内容）组成。方便起见，把border和padding都设为0，然后只需要调整content的width和margin就可以实现水平居中了。

水平居中原则：margin的百分数 x 2 + width的百分数 = 100%

水平居中示例代码效果

#

但是，如果想用类似的垂直居中原则（margin的百分数 x 2 + height的百分数 = 100%）的话，效果就不对了。div#child的高度、上下边距虽然都是我们想要的数值，但是div#child的上边距超出了div#parent的范围。div#child仍然保持和div#parent的顶端对齐。所以，用百分数表示width, margin的方法只适用于水平居中。

垂直居中示例代码效果

实际的#child元素的margin范围（橘色区域）

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

方法3：使用flexbox特性

flexbox水平、垂直居中都没问题，步骤如下：

1. 设置一个容器作为 flexbox
2. 在容器中指定内含元素水平居中，使用 justify-content: center
3. 在容器中指定内含元素垂直居中，使用 align-items: center

flexbox: 水平+垂直居中

#

如果要让多个元素（#sub-item1, #sub-item2, #sub-item3, ...）在保持原有布局的同时在容器内居中，那么就需要用一个<div>把多个元素包裹起来，使他们成为一个整体（即一个#item）。然后在容器内把这个整体居中。

<

如果不把多个元素包裹进一个div#item，则flexbox会把这些元素都按照指定的方向（沿行/沿列）堆叠，破坏这些元素之间的布局关系。

方法4：使用css的2D变换---translate()

这也是一个水平、垂直居中都没毛病的方法。

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

若要使元素垂直居中，则令 deltaY = (container的高度 - item的高度) / 2

同理，若要水平居中，则令 deltaX = (container的宽度 - item的宽度) / 2

垂直居中示例代码效果

#