CSS之居中方法整理

这是我参与更文挑战的第20天，活动详情查看：更文挑战

在之前我写的《一次性搞懂行内元素和块级元素》这篇文章中，有提到行内元素和块级元素的居中方法是不一样的。评论也有问到，所以干脆整理了一下关于行内元素和块级元素的居中方法。

一、行内元素居中

行内元素的居中比较简单，因为行内元素无法设置宽高，所以我们想让行内元素居中只需要给父元素设置样式即可。

1、水平居中

    <span class="line">行内元素</span>
复制代码

body{
    text-align: center;
}
复制代码

2、垂直居中

垂直居中只需要设置line-height为父容器的高度即可。

    line-height: height; //line-height与高度height同高
复制代码

二、块级元素居中

块级元素的居中

我们分情况来看，首先是块级元素的居中。

     <div id="div1">
        <div class="child"></div>
    </div>
复制代码

当我们想把?蓝色盒子居中在浅色背景这个div当中时有什么方法？

水平居中

• 绝对定位+left+right+margin

    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
复制代码

• 绝对定位+left+transform

    width: 200px;
    height: 200px; 
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
复制代码

• 绝对定位+left+margin-left

    width: 200px;
    height: 200px;        
    position: absolute;
    left: 50%;
    margin-left: -100px;（-0.5*width）
复制代码

• flex布局

对父元素：#div

    display: flex;
    justify-content: center;
复制代码

• 直接margin

    margin: 0 auto;
复制代码

垂直居中

• 绝对定位+margin

     .child {
        width: 200px;
        height: 200px;
        background-color: aqua;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
复制代码

• 使用伪类设置vertical-align

    #div1::after,.child {
        display: inline-block;
        vertical-align: middle;
    }
    
    #div1::after {
        content: '';
        height: 100%;
    }
复制代码

• flex布局

    #div1{
        display: flex;
        align-items: center;
    }    
复制代码

• 绝对定位+top+transform

    position: absolute;
    top: 50%;
    transform: translate( 0, -50%);
复制代码

• 绝对定位+top+margin-top(-0.5高度)

    position: absolute;
    top: 50%;
    margin-top: -100px;
复制代码

块级元素当中文字的居中

    <div id="div1">
        <h1 class="child">阿巴阿巴</div>
    </div>
复制代码

    text-align: center; // 水平居中
    line-height: 200px; // 垂直居中
复制代码

以上就是常用的居中方式，欢迎批评指正~~