CSS的水平垂直居中方式

CSS的水平垂直居中方式

目前常用比较多的四种垂直居中的方式，这里简单记录一下。

在实现以前，首先需要将需要居中的子元素的类别进行简单区分为行内元素和块级元素，关于行内元素和块级元素的区别在另外的文章中有介绍，这里便不多加赘述。这里首先处理行内元素。

行内元素

水平居中：

text-align: center;

垂直居中：

line-height: 100%;

两个属性均是在父元素中设置，设置文本高度与父元素高度相同即可实现垂直居中。

块级元素

1 margin:0 auto 实现水平居中

通过设置自身的margin值实现。

2 转换为行内元素进行处理

在开头我们介绍了行内元素的水平居中方式，块级元素也可以通过在自身属性中加上变为行内块元素的属性值，通过行内元素的方式进行水平或是垂直居中。

<!--转换为行内块元素-->
display: inline-block;

3 通过position进行设置

将父元素的position属性设置为relative（相对的），再将自身position属性设置为absolute（绝对的），通过调整位置进行设置以实现水平垂直居中。

        .father {
            position: relative;
            background-color: blueviolet;
            height: 500px;
            width: 500px;
            margin: 0 auto;
        }
        
        .children {
            height: 50px;
            width: 50px;
            background-color: brown;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

首先将子元素往下和往右移动到父元素高和宽的一半距离，再往上和往左移动自身高和宽的一半距离，以实现水平居中。

4 flex弹性布局

将父元素整体变成一个flex项目，通过设置justify-content: center;和align-items: center;实现水平垂直居中。

        .father {
            background-color: blueviolet;
            height: 500px;
            width: 500px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .children {
            height: 50px;
            width: 50px;
            background-color: brown;
        }

以上便是本人较为常用几种设置水平居中的样式，如有更好的方式欢迎大家与我多多交流。