CSS 水平垂直居中
<div class="wrap"> <div class="center"></div> </div>
方法一:
.wrap { width: 100%; height: 100%; background: yellow; } .wrap .center { width: 100px; height: 100px; background: green; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
方法二:
.wrap { position: absolute; background: yellow; width: 100%; height: 100%; } .center { position: absolute; background: green; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width: 100px; height: 100px; }
方法三:
.wrap { background: yellow; width: 100%; height: 100%; display: flex; position: absolute; } .center { background: green; width: 100px; height: 100px; margin: auto; }
方法四:
.wrap { background: yellow; width: 100%; height: 100%; display: flex; position: absolute; align-items: center; justify-content: center; } .center { background: green; width: 100px; height: 100px; }