如何实现子盒子水平和垂直居中？
2020-08-05 本文已影响0人
kugua666
盒子水平、垂直居中
（1）定位
方式一：（一定要知道子盒子具体宽高）
给父盒子设置为：position: relative
给子盒子设置为：position: absolute；top：50%；left：50%；margin-top：-25px；
margin-left：-25px；
方式二：（子盒子一定要有宽高，但是不必知道具体多少）
给父盒子设置为：position: relative
给子盒子设置为：position: absolute；top：0；left：0；right:0；bottom：0；margin：auto；
方式三：（不需要子盒子有宽高，但是此方法兼容性不好）
给父盒子设置为：position: relative
给子盒子设置为：position: absolute；top：50%；left：50%；transform：translateX（-50%）；transform：translateY（-50%）；
（2）利用伸缩盒的方式：当普通盒子被调整为伸缩盒后，要让子盒子水平垂直居中，就得给父盒子设置为：display：flex；justify-content：center；align-items：center；
（3）利用JS的方式
（4）将显示方式设置为表格
.father{
display: table-cell;
vertical-align: middle;//控制文本垂直居中
text-align: center;//控制文本水平居中
width: 500px;
height: 600px;//必须要有固定宽高
}
.son{
display:inline-block;
}
