利用 flex
布局
/* 无需知道被居中元素的宽高 */ .container { display: flex; align-items: center; justify-content: center; }
利用 absolute
+ transform
/* 无需知道被居中元素的宽高 */ /* 设置父元素非 `static` 定位 */ .container { position: relative; } /* 子元素绝对定位,使用 translate的好处是无需知道子元素的宽高 */ /* 如果知道宽高,也可以使用 margin 设置 */ .box { position: absolute; left: -50%; top: -50%; transform: translate(-50%, -50%); }
利用 grid
布局
/* 无需知道被居中元素的宽高 */ .container { display: grid; } .box { justify-self: center; align-self: center; }
利用绝对定位和 margin:auto
/* 无需知道被居中元素的宽高 */ .box { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .container { position: relative; }