已知

<!DOCTYPE html>
<html>
<head>
    <title>居中对齐</title>
    <style>
        .outer {
             
        }
        .inner {
            border: 1px solid black;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

要求黑色正方形居中显示

1.行内块：文本对齐text-align:center + inline-block

外部使用text-align:center 让行内元素居中，子元素设置为行内属性inline-block

.outer{
    border: 1px solid red;
    text-align: center;
}
.inner {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    display: inline-block;
}

2.块级block+ 边距自适应margin:0 auto

通过子元素左右的margin设置auto，让他自动根据当前父容器计算对应的margin宽度。

.outer {
    border: 1px solid red; 
}
.inner {
    border: 1px solid black;
    width: 100px;  
    height: 100px;
    margin: 0 auto; /*设置auto，让他自动根据当前父容器计算对应的margin宽度*/
}

3.弹性布局dispaly:flex + justify-content:center

通过flexbox的行居中

.outer {
    border: 1px solid red; 
    display: flex;
    justify-content: center;
}
.inner {
    border: 1px solid black;
    width: 100px;
    height: 100px;
}

3.1 弹性布局dispaly:flex + margin:0 auto

子元素直接使用margin:0 auto 动态计算

.outer {
    border: 1px solid red; 
    display: flex; 
}
.inner {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    margin:0 auto;
}

4. 网格 grid ;

 .outer {
    border: 1px solid red; 
    display: grid;
    justify-items: center;
}
.inner {
    border: 1px solid black;
    width: 100px;
    height: 100px;
}

4.1 grid + justify-content: center;

 .outer {
    border: 1px solid red; 
    display: grid;
    justify-content: center;
}
.inner {
    border: 1px solid black;
    width: 100px;
    height: 100px;
}

4.2 grid + 0 auto;

 .outer {
    border: 1px solid red; 
    display: grid; 
}
.inner {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

5.相对定位 relative + left:50% + margin-left: -50px

使用相对定位，同时设置left 偏移父容器50% ，再减去自身宽度一半，这里宽度是固定值。

.outer {
    border: 1px solid red; 
}
.inner {
    border: 1px solid black;
    width: 100px;
    height: 100px; 
    position: relative;/*设置当前为相对定位 */
    left: 50%;
    margin-left: -50px;/*减去自身宽度一半，是固定值的*/
}

6.绝对定位 absolute + left:50% margin-left: -50px

使用绝对定位，position:absolute , 同时设置距离左侧50%，再减去自身宽度一半，这个是固定值。

.outer {
    border: 1px solid red; 
    position: relative; /*子元素使用绝对定位，父级记得要对应设置相对，不然会一直往上找相对*/
    min-height: 100px;/*子元素脱离文档流 父容器需要自定*/
}
.inner {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    position:absolute;
    left: 50%;
    margin-left: -50px; /*减去自身宽度一半，是固定值的*/
}

6.1 绝对定位 absolute + left:50% + translateX(-50%)

利用translateX(-50%) 可以动态获取当前子元素的宽度并且做位移。

.outer {
    border: 1px solid red; 
    position: relative; 
    min-height: 100px; 
}
.inner {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    position:absolute;
    left: 50%;
    transform: translateX(-50%);  /*这里是动态计算当前元素的50% */
}

6.2 绝对定位 absolute + left:0 right:0 + margin:auto

先设置为绝对定位，再left right 设置子容器拉满，最后使用margin:0 auto,去自动计算偏移距离。

.outer {
    border: 1px solid red;
    position: relative;
    min-height: 100px;
}
.inner {
    border: 1px solid black;
    width: 100px;
    height: 100px; 
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

css 水平居中布局

已知