CSS布局篇之水平垂直居中

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_41196185/article/details/82692145

定宽高 + 绝对定位 + 0 + auto边距

这种方法需要知道元素的宽高，但是兼容性绝佳。

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 200px;
height: 200px;

定宽高 + 绝对定位 + 50% + 负边距

已知宽高，通过50%调整位置，负边距调整为自身宽度的一半

position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;

不定宽高 + 绝对定位 + 50%

top和left是相对于父元素偏移，而translate是相对于自身变形偏移，因而达到绝对居中效果，而且不需要知道自身宽度，非常优秀。缺点是使用的浏览器版本需要支持transform。

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

flex居中

父元素设置如下属性：

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

---

还有table布局也可以实现……