水平居中和垂直居中方法总结，总有一款姿势适合你

• 本文将总结容器内文字以及容器本身在不同场景下要如何水平垂直居中
• 本文以span标签为例，总结所有场景的居中布局方式，父容器为body
• 根据视频课程纯手敲和实验，亲测有效，感谢老师

1 容器宽高自适应 没有指定宽高 内容撑开

1-1 内联元素，不能设置宽高，内容撑开

1-1-1 文字水平（容器内容）垂直居中 多行文本

• 默认的内联元素是没有宽高的，根据内容自适应，所以不存在水平垂直居中问题
• 内联元素的padding-top/padding-bottom属性不生效
• 但是为什么input元素和textare类似内联元素可以生效呢？是因为内联元素还具体分为可替换元素和不可替换元素，具体的属性说明可以参考：点击跳转链接

	// span为内联元素，默认设置display: inline
    display: inline;
    padding: 30px 20px;// 可以发现30px不生效，即内联元素padding-top不生效

    // 针对padding-top/bottom失效问题，可以考虑使用内联块属性
    display: inline-block;// 对外表现为inline，队内表现为block

1-1-2 容器水平（容器本身，相对于父元素）垂直居中 多行文本

• 没有宽度和高度

	// 方法一（推荐）
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    // 方法二（父容器设置flex，不兼容flex时候用方法一	）
    display: flex;
    justify-content: center;
    align-items: center;

1-2 内联块元素 不能设置宽高 内容撑开

1-2-1 文字水平（容器内容）垂直居中 多行文字

• 内联块可以设置宽高、内外top/bottom边距
• 对外表现为内联元素（行内元素），对外表现为块元素

	// 设置padding-top / bottom
	display: inline-block;
    padding: 30px 20px;

1-2-2 容器水平（容器本身，相对于父元素）垂直居中 内联块元素

	// 方法一（推荐）
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    // 方法二（父容器设置flex，不兼容flex时候用方法一	）
    display: flex;
    justify-content: center;
    align-items: center;

1-3 块元素 不设置宽高

1-3-1 文字水平（容器内容）垂直居中 多行文字

• 默认宽度是100%
• 需要计算padding的值，比较麻烦

	display: block;
    text-align: center;// 水平居中
    padding: 30px 0;// 撑开

1-3-2 容器水平（容器本身，相对于父元素）垂直居中 块元素

• 可以还是使用万能的方法一absolute，但是这个时候就会把元素默认设置为inline-block，width默认为文字宽度，需要手动指定width:100%
• absolute和float会默认改变display类型，不论之前什么类型的元素（除display: none），只要设置了position：absolute/float，都会让元素默认设置为display: inline-block，可以设置宽高，但是默认宽度并不占据父元素整个宽度，而是内容宽度，高度也是内容高度。

	// 方法一（推荐）
	position: absolute;
    display: inline-block;// absolute默认把元素设置为了inline-block
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    // 方法二（父容器设置flex，不兼容flex时候用方法一	）
    display: flex;
    justify-content: center;
    align-items: center;

2 指定容器宽高

2-1 内联元素 不能设置宽高 内容撑开

• 内联元素不可以设置宽高，所以就不用再考虑此场景

2-2 内联块元素 设置宽高

2-2-1 文字水平（容器内容）垂直居中 多行文字和多行文字

• 指定了宽高，指定了display为inline-block，该如何让内容文字居中？

单行文本处理方式：

	// 指定了宽高，指定了display为inline-block
    display: inline-block;
    width: 300px;
    height: 100px;
    
    // 方法一
    text-align: center;// 水平居中
    line-height: 100px;// 垂直居中，单行文本可以这样处理，多行的话会溢出显示在容器下方，可以使用overflow：hidden隐藏，但是完全不退见
    
    // 方法二
    flex布局，比较流氓的做法，就不再写了

多行文本处理方式，当然使用flex流氓做法：

	display: flex;
    justify-content: center;
    align-items: center;

2-2-2 容器水平（容器本身，相对于父元素）垂直居中 内联块元素

• 使用margin：0 auto;为啥不行？因为auto必须要和display： block配合使用

    // 方法一（推荐）
	position: absolute;
    display: inline-block;// absolute默认把元素设置为了inline-block
    left: 50%;
    top: 50%;
    transform: translate(-宽度一半, -高度一半);

    // 方法二（父容器设置flex，不兼容flex时候用方法一	）
    display: flex;
    justify-content: center;
    align-items: center;

2-3 块元素 设置宽高

2-3-1 文字水平（容器内容）垂直居中 多行文字

• 通过line-height设置

    // 指定了宽高，指定了display为inline-block
    display: inline-block;
    width: 300px;
    height: 100px;
    
    // 方法一
    text-align: center;// 水平居中
    line-height: 100px;// 垂直居中，单行文本可以这样处理，多行的话会溢出显示在容器下方，可以使用overflow：hidden隐藏，但是完全不退见
    
    // 方法二还是flex布局

2-3-2 容器水平（容器本身，相对于父元素）垂直居中 块元素

    // 方法一（推荐）
	position: absolute;
    display: inline-block;// absolute默认把元素设置为了inline-block
    left: 50%;
    top: 50%;
    transform: translate(-宽度一半, -高度一半);

    // 方法二，利用absolute和align进行拔河效应
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;

    // 方法三，利用flex，代码略