前端-CSS篇|CSS水平垂直居中的几种方式,CSS定位

.box { width: 300px; height: 300px; margin: auto; background-color: aquamarine; } .box1 { width: 300px; display: inline-block; text-align: center; background-color: aquamarine; } .box2 { position: absolute; width: 300px; left: 50%; margin-left: -150px; background-color: aquamarine; } .box3 { position: absolute; width: 300px; height: 300px; top: 50%; margin-top: -150px; background-color: aquamarine; } .box4 { display: inline-block; width: 300px; height: 100px; background-color: bisque; line-height: 100px; } .box5 { position: absolute; width: 300px; height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: aquamarine; } .box6 { position: absolute; width: 300px; height: 300px; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background-color: aquamarine; }

absolute 垂直居中

【前端-CSS篇|CSS水平垂直居中的几种方式,CSS定位】水平垂直居中的效果如下:
前端-CSS篇|CSS水平垂直居中的几种方式,CSS定位
文章图片

    推荐阅读