CSS居中方法总结1.文本居中 + height + line-height：两者配合使用，垂直方向居中 text-al

前言：本文记录文本居中、水平居中、垂直居中、万能居中方法以及绝对居中方法，若有错误还请指正！

1.文本居中

+ height + line-height：两者配合使用，垂直方向居中

text-align：父级的 text-align，水平方向居中

注意：text-align：center ；只是将子元素里的内联元素居中如果不是内联元素就要用到 margin： 0 auto；

 <div class="word">
    <p>优秀</p>
 </div>

 .word {
    width: 100px;
    height: 30px;
    background-color: #e5e5e5;
    text-align: center;
    line-height: 30px;
    font: size 14px;
}

优秀这两个字在 div 中妥妥居中。

2.水平居中

水平居中分两种情况

定宽块元素水平居中

定宽 + 块元素

<div class="wrap"></div>

.wrap {
    width: 200px;
    height: 200px;
    border: 1 soild red;
    margin: 0 auto; /*宽度必须给值*/
}

不定宽块元素水平居中
- 改变为行内元素,然后使用 text-align:center 处理,多用于不定项导航的 ul 的居中

<div>
    <ul>
        <li>11111</li>
        <li>22222</li>
    </ul>
</div>

.nav {text-align:center;}
.nav ul {display: inline;}

不定宽块元素水平居中

3.父元素浮动 left：50%;

同时要设置 position:relative（给子元素相对定位一个参考）

子元素相对定位 position：relative；left：-50%；

<div class="parent">
    <div class="son">子盒子</div>
</div>

.parent {
    position: relative;
    left: 50%;
    float: left;
    width: 300px;
    height: 300px;
    background-color: pink;
}

.parent .son {
    position: relative;
    left: -50%;
    width: 150px;
    height: 150px;
    background-color: red;
}

4.垂直居中

垂直居中也分两种情况

块级元素垂直居中，子元素知道具体宽高

设置 top:50%，这个块元素的最上边为垂直居中的位置，但是这样整体的内容并不是垂直居中，所以要设置 margin-top: -2/父宽 px; //为高度的一半,这样这个块元素又相对于自身最上面向上又移动了自身的 50 因此就垂直居中了。

<style>
    .parent {
        /* 父元素 */

    }

    .parent .son {
        position: absolute;
        width: 100px;
        height: 100px;
        background: red;
        top: 50%;
        margin-top: -50%;
        /* 为高度的一半 */
    }
</style>
</head>

<body>
<div class="parent">
    <div class="son"></div>
</div>
</body>

子元素不知道具体宽高

这种情况有三种方法:

借助 table 布局
- display：table-cell 实现法
- display：table-cell 主要针对多行文字内容的垂直居中对齐
- display:table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

div {
    display: table-cell;
    width: 200px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #F00;
}

借助 translate 的 transform 属性

.parent{
    position: relative;
}

.parent .son {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

用 flex 布局

.parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

5.万能居中方法

首先移动子元素高度(宽度)的一半：left：50%;(top:50%;)

再移动父元素高度(宽度)的一半：margin-left:-宽/2;(margin-top:-高/2;）

前提:必须要知道子元素的宽高

    <style>
        .parent {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: relative;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>

效果效果：

6.绝对居中

<style>
    .parent {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        position: relative;
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        overflow: hidden;
    }
</style>
</head>

<body>
<div class="parent">
    <div class="son"></div>
</div>
</body>

效果如下：

总结：居中的方法有很多，不局限以上这几种居中方法