CSS-居中一个元素（水平、垂直、水平垂直）

1. 水平居中

1.1 行内元素

利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。

    /* 在父容器（块级元素）设置 */
    .parent {
        text-align: center;
    }

如果块级元素内部包着也是一个块级元素，我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。

<style>
    .parent {
        text-align: center;
    }

    .child {
        display: inline-block;
    }
</style>

1.2 块级元素

(1) margin: 0 auto

.child{
    width: 100px;//确保该块级元素定宽
    margin:0 auto;
}

(2) position + transform
先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后通过向左移动子元素的一半宽度以达到水平居中。

<style>
    .parent {
        position: relative;
    }

    .child {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>

(3) flex + justify-content
justify-content用于控制子元素在主轴上位置

<style>
    .parent {
        display: flex;
        justify-content: center;
    }
</style>

2. 垂直居中

2.1 单行内联元素

使得height == line-height即可

<style>
    #box {
        height: 120px;
        line-height: 120px;
        border: 1px solid lightgreen;
    }
</style>

2.2 多行内联元素

(1) flex
通过flex-direction改变主轴为纵向，再通过justify-content居中即可（或者直接通过align-items设置居中也是一样的）

<style>
    .parent {
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* align-items: center; */
        border: 3px solid lightgreen;
    }

    <div class="parent">
        <p class="child">The more technology you learn, the more you realize how little you know.
            The more technology you learn, the more you realize how little you know.
            The more technology you learn, the more you realize how little you know.</p>
    </div>
</style>

2.3 块级元素

(1) flex
同上

(2) 已知块级元素高度 position + margin

<div class="parent">
    <div class="child">固定高度的块级元素垂直居中。</div>
</div>

<style>
    .parent {
        position: relative;
    }

    .child {
        position: absolute;
        top: 50%;
        height: 100px;
        margin-top: -50px;
    }
</style>

(3) 未知块级元素高度 position + transform

<style>
    .parent {
        position: relative;
    }

    .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
</style>

3. 水平垂直居中

(1) 知道宽高 position + margin

<style>
    #container {
        position: relative;
    }

    #center {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -50px;
    }
</style>

(2) 不知道宽高 margin:auto

 #container {
      position: relative;
      height:100px;//必须有个高度
    }
 #center {
      position: absolute;
      // center元素本身将被拉伸以填充整个#container元素
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      // center元素的内容会被自动计算居中
      margin: auto;
    }

(3) 不知道宽高 position + transform

<style>
    #container {
        position: relative;
    }

    #center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

(4) flex justify-content align-items

<style>
    #container {    
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

(5) flex margin: auto

<style>
    #container {
        height: 100vh;
        display: grid;
    }

    #center {
        margin: auto;
    }
</style>