CSS盒⼦居中的⽅法
CSS盒⼦居中的⽅法
1. CSS盒⼦⽔平居中的⽅法
1.1 使⽤ margin: 0 auto;
当元素的左右外边距（margin）相等的时候，元素就处在中间位置，这可以通过将左右外边距都设为auto来实现。如果是块级元素通常还需要定义宽度。如下所⽰：
section{
width: 400px;
margin: 0 auto;
}
注意，如果把上下外边距设为auto，并不能实现垂直居中，因为这时候auto相当于0.
1.2 把盒⼦转成⾏内块，然后⽤ text-align 属性使盒⼦⽔平居中
改变需要居中元素的盒类型，调整为⾏内块(inline-block)，在⽗元素中将text-align属性设为center，就能实现⽔平居中。
.father{
width: 500px;
height: 500px;
margin: 50px auto;
text-align: center;              // 让⽗盒⼦设置⽔平居中
}
.son{
width: 200px;
height: 200px;
display: inline-block;            // 让⼦盒⼦显⽰为⾏内块模式
}
1.3 ⼦绝⽗相 + margin负值
⽗盒⼦采⽤相对定位，⼦盒⼦采⽤绝对定位，先让盒⼦左右边缘和⽗盒⼦垂直的中⼼线垂直（left：50%），然后把⼦盒⼦往回移动⾃⾝宽度的⼀半
可以有两种⽅法实现反向偏移⼀半的效果：
margin-left：
father{
width: 500px;
height: 500px;
position: relative;
}
.son{
width: 200px;
height: 200px;
position: absolute;
left: 50%;                      // 向右移动⽗盒⼦⼀半
margin-left: -100px;            // 向左移动⾃⾝盒⼦⼀半
transform：translateX(-50%)
father{
width: 500px;
height: 500px;
position: relative;
}
.
son{
width: 200px;
height: 200px;
position: absolute;
left: 50%;                      // 向右移动⽗盒⼦⼀半
transform:translateX(-50%);    //向左移动⾃⾝盒⼦⼀半
1.4 flex布局
这是CSS3引⼊的新功能，当普通容器被调整为伸缩容器后，如果要让⾥⾯的元素⽔平居中，那么就相当于主轴的居中对齐,（⼦盒⼦有或没有宽⾼的时候都适⽤）
.father{
display: flex;
justify-content: center;
}
但是⽬前IE的多个版本还不⽀持此功能
2. CSS盒⼦垂直居中的⽅法
2.1 ⾏⾼：line-height：height
只有当容器的⾼度已知并且是单⾏⽂本时，才能⽤⾏⾼实现垂直居中
<div >
<p>单⾏⽂本垂直居中</p>
</div>
注意：如果将单⾏⽂本改为图像，⽤⾏⾼则不能实现图像的⽔平居中
2.2 利⽤table的特征
text align center该⽅法将普通元素调整为表格元素，然后利⽤vertical-align属性就能让内容居中对齐
display:table-cell;//设置为表格单元
vertical-align：middle;//设置表格属性，此时垂直居中了
text-align：center；//此时没有⽤的，⼦元素此时为块元素，，不是⾏内元素，text-align⽆效，需要对⼦元素进⾏处理称为⾏内块元素
}
.allCenterChild{
display： inline-block;//⼦元素变为⾏内块元素，加上⽗元素的text-align属性，此时⽔平居中了
}
虽然模拟表格能带来很多便捷，但同时也受到了限制。例如跳针过的元素不能⽤定位和浮动；使⽤盒类型table-cell的时候，必须同时有个祖先元素的盒类型是table；变为表格的元素，它的默认宽度将不再占⼀⾏，因为表格本质上是⾏内元素
2.3 ⼦绝⽗相 + margin负值
与⽔平居中的⽅法类似，⽗盒⼦采⽤相对定位，⼦盒⼦采⽤绝对定位，先让盒⼦上下边缘和⽗盒⼦垂直的中⼼线垂直（top：50%），然后把⼦盒⼦往上移动⾃⾝宽度的⼀半
可以有两种⽅法实现反向偏移⼀半的效果：
margin-top：
father{
width: 500px;
height: 500px;
position: relative;
}
.son{
width: 200px;
height: 200px;
position: absolute;
top: 50%;                      // 向下移动⽗盒⼦⼀半
margin-top: -100px;            // 向上移动⾃⾝盒⼦⼀半
transform：translateY(-50%)
father{
width: 500px;
height: 500px;
position: relative;
}
.son{
width: 200px;
height: 200px;
position: absolute;
top: 50%;                      // 向下移动⽗盒⼦⼀半
transform:translateY(-50%);    //向上移动⾃⾝盒⼦⼀半
2.4 flex布局
⽗级对⼦元素进⾏垂直居中，居中属性只需要定义在⽗元素中，相当侧轴的居中对齐
.wrap{  //【基础设置】⽗元素：宽⾼各600px width: 600px;
height: 600px;
}
.item{  //【基础设置】⼦元素：宽⾼各150px
width：150px;
height:150px;
}
.allCenter{
display:flex;//设置弹性布局，display属性选为flex align-items:center;//让⼦元素垂直居中
}
.allCenterChild{//⽗元素不受影响
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。