文字
text-align属性作用于指定元素内的所有文字。例如以下代码令<p>元素中的所有文字居中对齐。
p
inline-block元素
常见的inline-block对象是<img>, <span>。inline-block元素在默认设置中和inline元素一样,是可以在一行中连续排列的。令inline-block元素居中的第一步是将其转化为block元素,即保证一行只有这一个元素。
- 使用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的方法只适用于水平居中。
/* 这是一段实现不了垂直居中的css */
方法3:使用flexbox特性
flexbox水平、垂直居中都没问题,步骤如下:
- 设置一个容器作为 flexbox
- 在容器中指定内含元素水平居中,使用 justify-content: center
- 在容器中指定内含元素垂直居中,使用 align-items: center
#
如果要让多个元素(#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
#