CSS学习笔记（水平、垂直对齐）

元素水平居中

使用margin，且必须指定元素宽度width，才可起作用。

文本居中

使用text-align，使文本在元素内水平居中

图片居中

使用margin，指定其宽度width，并且将图片放在块元素中

左右对齐

使用position

绝对定位元素会被从正常流中删除，并且能够与其后面的元素重叠。

使用float

注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时可以在父元素上添加 overflow: auto; 来解决该问题。

垂直居中

使用padding

文本处于容器垂直居中的位置，但容器的 height 会随着文本行数的增加而增大；

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

使用line-height

设置line-height 与 容器 height 相等，仅对单行文本有效。
当文本行数超过单行时：
容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示；
多行文本可使用 vertical-align: middle; 来实现元素的垂直居中，但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。

使用 position 和 transform