目录

1.标准盒子居中

2.定位-绝对定位实现居中

3.表格方式实现垂直居中

4.弹性盒子：实现垂直居中

5.通过行高line-height实现垂直居中

6.变形+定位实现居中

7.网格实现垂直居中

1.标准盒子居中

        不需要设置display，只能实现水平居中

效果：

 效果图源码：

只能水平实现居中，不能垂直居中必须指定子元素大小，通过盒子的水平布局等式实现左右外边距+子盒子宽度=父盒子宽度

2.定位-绝对定位实现居中

不需要设置display, 需要设置position, 口诀是：子绝父相

 -原理：
        左右偏移量+可见框宽度+左右外边距=包含块宽度
        上下偏移量+可见框高度+上下外边距=包含块高度
        缺点：
        配置项比较多，也是要指定盒子大小

效果图：

效果图源码：

通过定位：position实现居中：子绝对定位父相对定位同时开启：position: absolute;top、bottom、left、right: 0;margin:auto;-原理：左右偏移量+可见框宽度+左右外边距=包含块宽度上下偏移量+可见框高度+上下外边距=包含块高度缺点：配置项比较多，也是要指定盒子大小

3.表格方式实现垂直居中

display: table-cell;

效果图：

效果图源码：

通过设置父元素为：table-cell:/*实现水平居中*/display: table-cell;vertical-align: middle;//子元素加上下面margin实现垂直水平居中margin: 0 auto;

4.弹性盒子：实现垂直居中

display: flex

效果图：

效果图源码：

justify-content:center;align-items:center;实现居中

5.通过行高line-height实现垂直居中

行高与盒子高度一样，加：

text-align: center;

让内部的文字在中间显示。

效果图：

效果图源码：

休

6.变形+定位实现居中

/*绝对定位与变形结合实现：垂直水平居中*/
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);

效果图：

效果图源码：

人闲桂花落
夜静春山空
月出惊山鸟
时鸣春涧中

7.网格实现垂直居中

display: grid;

效果图：

效果图源码：

www