css居中那点事

使用css居中有很多种方式，在这里写几个最佳实践。代码简单粗暴，适用性强，让你不必这点小事烦恼，提升你的工作效率，早几分钟下班回家LOL岂不是美滋滋

**不多说废话，直接上代码**

* 基本的样式和布局

```

<div class="container">

        <div class="inner">

        </div>

</div>

```

```

    .container {

        height: 200px;

        width: 200px;

        background: #369;

    }

    .inner {

        height: 50px;

        width: 50px;

        background: #963;

    }

```

* 左右居中最简单的两种写法

```

    <p>左右居中1</p>

    <div class="container center1">

        <div class="inner center-inner1">

        </div>

    </div>

    <p>左右居中2</p>

    <div class="container center2">

        <div class="inner">

        </div>

    </div>

```

```

.center1 {

        text-align: center;

    }

    .center-inner1 {

        display: inline-block;

    }

    .center2 {

        display: flex;

        justify-content: center;

    }

    .center-inner2 {

        display: inline-block;

    }

```

* 垂直居中的两种最简单写法

```

<p>垂直居中1</p>

    <div class="container center3">

        <div class="inner center-inner3"></div>

    </div>

    <p>垂直居中2</p>

    <div class="container center4">

        <div class="inner center-inner4"></div>

    </div>

```

```

.center3 {

        display: flex;

        align-items: center;

    }

    .center4 {

        position: relative;

    }

    .center-inner4 {

        position: absolute;

        top: 50%;

        transform: translateY(-50%);

    }

```

* 左右居中+垂直居中

```

    <p>左右居中+垂直居中</p>

    <div class="container center5">

        <div class="inner"></div>

    </div>

```

```

    .center5 {

        display: flex;

        align-items: center;

        justify-content: center;

    }

```

点个收藏关注一下不迷路