在CSS中,实现DIV居中的方法有很多种。下面介绍几种较为常见的方法。方法一:使用margin实现DIV居中div{ width: 200px; height: 200px; margin:0 aut
方法一:使用margin实现DIV居中
div{ width: 200px; height: 200px; margin:0 auto; }
方法二:使用绝对定位实现DIV居中
div{ position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; }
方法三:使用flex实现DIV居中
.container{ display: flex; justify-content: center; align-items: center; height: 100vh; } div{ width: 200px; height: 200px; }
方法四:使用grid实现DIV居中
.container{ display: grid; place-content: center; height: 100vh; } div{ width: 200px; height: 200px; }
方法五:使用transform实现DIV居中
div{ position: absolute; width: 200px; height: 200px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
粉丝
0
关注
0
收藏
0