------------恢复内容开始------------
html水平居中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box1{ 10 width: 500px; 11 height: 500px; 12 background-color: aqua; 13 /* position: relative; */ 14 } 15 .box2{ 16 width: 100px; 17 height: 100px; 18 background-color: orange; 19 position: absolute; 20 /* 水平居中 */ 21 /* margin-left: auto; 22 margin-right: auto; 23 right: 0; 24 left: 0; */ 25 26 /* 垂直居中 */ 27 /* margin-top: auto; 28 margin-bottom: auto; 29 top: 0; 30 bottom: 0; */ 31 /* 位于父元素正中心 */ 32 right: 0; 33 left: 0; 34 top: 0; 35 bottom: 0; 36 margin: auto; 37 } 38 /* 39 水平布局 40 left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块的内容区的宽度 41 42 -当我们开启绝对定位以后： 43 水平方向的布局等式就需要添加left和right两个值 44 此时 规则和之前一样 只是多添加了两个值： 45 当发生过度约束时， 46 如果9个值中没有 auto 则自动调整right以使我们的等式满足 47 如果auto，则自动调整auto的值以使等式成立 48 49 -可设置为auto的值 50 margin width right left 51 52 -因为 left和right 的默认值是auto，所以如果不设置left和right 53 则等式不满足时，会自动调整这两个值 54 55 56 垂直方向布局的等式也必须要满足： 57 top+margin-top/bottom+padding-top/bottom+border-top/bottom+height = 包含块的高度 58 59 60 */ 61 </style> 62 </head> 63 <body> 64 <div class="box1"> 65 <div class="box2"></div> 66 </div> 67 </body> 68 </html>
对于相对于谁居中就设置对应的包含块 position:relative;
即可对应居中
position: absolute;
20 /* 水平居中 */
21 /* margin-left: auto;
22 margin-right: auto;
23 right: 0;
24 left: 0; */
25
26 /* 垂直居中 */
27 /* margin-top: auto;
28 margin-bottom: auto;
29 top: 0;
30 bottom: 0; */
31 /* 位于父元素正中心 */
32 right: 0;
33 left: 0;
34 top: 0;
35 bottom: 0;
36 margin: auto;
------------恢复内容结束------------