CSS里的各种水平垂直居中

CSS里的各种水平垂直居中

内联元素的特点：

1. 不占据一整行，随内容而定

2. 不可以设置宽高，也不可以设置行高，其宽度随内容增加，高度随字体改变

3. 可以设置内外边界，但内外边界不对上下起作用，只对左右起作用。

块级元素的特点：

1. 总是在新行上开始，占据一整行

2. 高度，行高以及内边距和外边距都可以控制

3. 宽度始终与浏览器宽度一致，与内容无关

4. 可以容纳内联元素和其他块级元素

使各种元素水平垂直居中的方法：

a. 块级元素中文字水平居中：

text-align: center (作用在块中的文字或者图片上，使它们在水平方向上居中)

b. 块级元素自身水平居中（确定设置了宽度的块级元素）

margin: 0 auto;

c. 块级元素自身水平居中（不确定宽度的块级元素）

若块元素的子元素也为块元素，则对子元素使用margin: 0 auto；一类的方法

若块元素的子元素为行内元素，则用text-align: center即可

d. vertical-align（用于行内元素中的垂直居中）

该属性适用于：内联元素（及被转化为内联元素的块级元素）

display设置为table-cell的元素

<td><tr>这样的元素

e. 块级元素中的文字图片垂直居中

设置height和line-height的高度相同

f． 块级元素中的文字图片垂直居中（高度不确定）

在块的高度不确定的情况下，它的高度取决于内容的高度，如想让文字和图片垂直居中，将上下内边距设置为一样的即可（padding-top=padding-bottom）

g． 其他可采用flex布局

display:flex （应用在父容器上）

flex-flow: row wrap; （主轴方向默认行，wrap控制伸缩容器为多行）

align-items: center （纵轴对齐伸缩项目，应用于父级伸缩容器）

justify-content: center; （主轴对齐伸缩项目，同样应用于父级伸缩容器）