如何使不定宽高的div在父元素中水平垂直居中
1、flex布局
<div class="box"> <div class="mask"> <!-- 内容 --> </div> </div> /* css样式 */
.box { display: flex; justify-content: center; align-items: center; } .mask { /* 样式 */ }
2、position + transform
<div class="box"> <div class="mask"> <!-- 内容 --> </div> </div> /* css样式 */
.box { position: relative; } .mask { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
3、flex + margin
<div class="box"> <div class="mask"> <!-- 内容 --> </div> </div> /* css样式 */ .box { height: 100vh; display: flex; } .mask { margin: auto; }
注意：使用该方法必须保证父元素有高度。