css 水平对齐与垂直对齐 几种方式的对别

水平对齐

1. 要水平居中对齐一个元素(如
   ), 可以使用 margin: auto; （如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。）
2. 如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
3. 要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中

左右对齐

1. 使用 position: absolute; 属性来对齐元素: ( {position: absolute; right: 0px;})
2. float实现对齐（1 overflow: auto/overflow:hidden 清除浮动；2 clear: both清除浮动）

垂直对齐

1. padding 方式实现 （如果要水平和垂直都居中 可以使用 padding 和 text-align: center:）
2. 使用 line-height 来设置垂直居中:
3. 使用 transform 属性来设置垂直居中:

注意

设置容器上下 padding 相同实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文本有效，
当文本行数超过单行时：
1）padding：文本仍然处于容器垂直居中的位置，但是容器的 height 会随着文本行数的增加而增大；
2）line-height=height：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示&