css div居中显示方法

作者：@kuaiquxie
作者的github：https://github.com/bitebita
本文为作者原创，如需转载，请注明出处：https://www.cnblogs.com/dzwj/p/16316481.html

---

CSS样式——div居中方法

绝对居中：首先给div添加绝对定位，并设置上下左右边距为0，然后使用margin: auto;自动居中。

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

PHP中有效
水平垂直居中：给其父元素添加display: flex;弹性布局。
内容对齐（justify-content）属性：应用在弹性容器上，即父元素上。把弹性项沿着弹性容器的主轴线（main axis）对齐，如果横向有多个div，则X轴就为当前弹性容器的主轴线，Y轴为副轴线，反之亦然。

display: flex;
justify-content: center;
align-items: center;

（定位+变形）居中:
给父元素添加 position: relative;相对定位。
给自身元素添加position: absolute;绝对定位。
top: 50%;使自身元素距离上方“父元素的50%高度”的高度。
left: 50%;使自身元素距离上方“父元素的50%宽度”的宽度。
transform: translate(-50%,-50%);使自身元素再往左，往上平移自身元素的50%宽度和高度

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);