水平垂直居中

![img]()

```html
<div class="box">
<text class="info">123</text>
<div class="info"></div>
</div>
```

在一个评论里看到的，

1. ## 已知盒子大小：

### 1) 子盒子：定位+margin

（position: absolute; left:50%; top:50%; margin-top:-盒子高度一半px;margin-left:-盒子宽度一半px）

```css
.box{
500px;
height: 500px;
background: rgb(216, 185, 185);
position: relative;

}
.info{
120px;
height: 120px;
background: rgb(187, 240, 209);
position: absolute;
left: 50%;
top: 50%;
margin-top: -60px;
margin-left: -60px;
}
```

### 2) 子盒子：定位：

positon: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;

```css
.box{
500px;
height: 500px;
background: rgb(216, 185, 185);
position: relative;

}
.info{
120px;
height: 120px;
background: rgb(187, 240, 209);
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
```

2. ## 未知盒子大小：定位+transform

（left:50%;top:50%;transform: translate(-50%,-50%)）

```css
.box{
500px;
height: 500px;
background: rgb(216, 185, 185);
position: relative;
}
.info{
120px;
height: 120px;
background: rgb(187, 240, 209);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)
}
```

3. ## flex布局: 父盒子

display:flex; justify-content: center; aligin-items: center;

```css
.box{
500px;
height: 500px;
background: rgb(216, 185, 185);
display: flex;
justify-content: center;
align-items: center;
}
.info{
120px;
height: 120px;
background: rgb(187, 240, 209);
}
```

4. ## 父盒子：仅用于行内块元素

display: table-ceil; text-align: center; vertical-align: middle;

```css
.box{
500px;
height: 500px;
background: rgb(216, 185, 185);
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div class="box">
<text class="info">123</text>
</div>
```

![img]()

5. ## 使用js获取到盒子的宽高，按照方法1设置 定位+margin