div嵌套居中的三种方法

div2

?

1 2 3 4 5

<div class="div1">     <div class="div2">         div2     </div> </div>

css

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

.div1 {     background-color: aqua;     height: 100px;     width: 100px;       /* 方法一、三 */     /* 子元素为绝对定位，父元素必须为相对定位 */     /* position: relative; */       /* 方法二 */     /* display: flex;     justify-content: center;     align-items: center; */ }   .div2 {     background-color: yellow;     height: 50px;     width: 60px;       /* 方法一 */     /* position: absolute;     top: 0;     left: 0;     bottom: 0;     right: 0;     margin: auto; */       /* 方法三 */     /* position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, -50%); */ }