定寬高 + 絕對定位 + 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佈局也可以實現……