CSS-水平垂直居中

水平居中

• 元素宽度固定，margin：0 auto；
• 行内元素，父元素text-align: center;
• 子绝父相，孩子left：0；right：0；margin：auto；
• 父元素设置display：flex；justify-content: center；

垂直居中

• 父元素设置display: flex；align-items: center；
• 子绝父相，子top和bottom为0，margin：auto；
• 文本的话，用行高和高度一致即可

方法一：子绝父相

<style>
        .outter {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }

        .inner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            //下面的也可以
            /* margin-left: -50px;
            margin-top: -50px; */
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>

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

方法二：flex

.outter {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }

        .inner {
            width: 100px;
            height: 100px;
            background: pink;
        }

方法三：grid

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

.container {
  display:grid;
  justify-content: center;
  align-content: center;
  width:400px;
  height:400px;
  background:#eee;
}
.inner {
  width:40px;
  height:40px;
  background:#333;
}

codepen