css的10种盒⼦⽔平垂直居中⽅法
<body>
<div class="wrap allCenter">//⽗元素
<div class="item allCenterChild"></div>//⼦元素
</div>
</body>
第⼀种：弹性布局（flex布局）：⽗级对⼦元素进⾏垂直居中，居中属性只需要定义在⽗元素中
<style>
.wrap{//【基础设置】⽗元素：宽⾼各600px，紫⾊边框
width:600px;
height:600px;
border:2px solid purple;
}
.item{//【基础设置】⼦元素：宽⾼各150px，绿⾊
width：150px;
height:150px;
background: green;
}
//第⼀种
.allCenter{//⼦元素不受影响
display:flex;//设置弹性布局，display属性选为flex
justify-content: center;//让⼦元素⽔平居中
align-items:center;//让⼦元素垂直居中
}
.allCenterChild{//⽗元素不受影响
}
</style>
第⼆种：让⼦元素⽤外边距⾃动顶开
.allCenter{//⼦元素不受影响
display:flex;//设置弹性布局，display属性选为flex
}
.allCenterChild{//⽗元素不受影响
margin:auto;//等价于margin:auto auto auto auto;
}
第三种;
.allCenter{//⼦元素不受影响
display:flex;//设置弹性布局，display属性选为flex
}
.allCenterChild{//⽗元素不受影响
align-self:center;//脱离⽗级的align-items（垂直居中）属性，重写⼀遍，设置了垂直居中
margin：0 auto;//设置⽔平居中
}
第四种: Grid布局，⽔平居中和垂直居中的属性定义在⼦元素中，不在⽗元素中
.allCenter{//⼦元素不受影响
display:grid;//设置grid布局，display属性选为grid，定义在⽗级上⾯的属性
}
.allCenterChild{//⽗元素不受影响，
justify-self：center;//⽔平居中，横向
align-self：center;//垂直居中
}
第五种：⼦元素的外边框50%减去盒⼦⾼度的⼀半（⼦元素盒⼦⾼度为150px）
margin:calc(50%-75px) auto 0 auto;
}
第六种：⽤绝对定位,⼦元素的上右下左距离都是⼀样的，上下左右都设置为0，【拔河效应】（元素宽⾼需要提前设定）.allCenter{//⽗元素属性可写可不写
position:relative;
}
.allCenterChild{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;//这时候还没有垂直居中，仍然在左上⾓
margin:auto;//加上margin属性⼦元素才能垂直居中
}
第七种：绝对定位,⼦元素使⽤transfrom属性，【元素宽⾼⽆需设定】
.allCenterChild{
position:absolute;
left:50%;//向下移动50%
right:50%;//向下移动50%
//此时⼦元素的左上直⾓在⽗元素的中⼼点中，接下来需要把⼦元素的中⼼点移动到⽗元素的中⼼点位置中
transfrom:translate(-50%,-50%)//变形，⼦元素向左移动⾃⾝宽度的50%，向上移动⾃⾝⾼度的50%，向下向右移动则为正值
}
第⼋种：利⽤table的特征，只对表格有效
*在⼦元素没有设置宽⾼度和数量时使⽤
注意：table-cell不感知margin，在⽗元素上设置table-row等属性，也会使其不感知height。
.allCenter{
display:table-cell;//设置为表格单元
css设置文字垂直居中
vertical-align：middle;//设置表格属性，此时垂直居中了
text-align：center；//此时没有⽤的，⼦元素此时为块元素，，不是⾏内元素，text-align⽆效，需要对⼦元素进⾏处理称为⾏内块元素
}
.allCenterChild{
display： inline-block;//⼦元素变为⾏内块元素，加上⽗元素的text-align属性，此时⽔平居中了
}
第九种：内容只有⼀⾏的时候可以⽤，其他的不可以使⽤，对⽂字进⾏⽔平垂直居中
⽗级元素：div ⼦元素：⾏内的⽂字
<stytle>
.oneline{
width:600px;
height:80px;
background:pink;//基本属性
font-size：25px；//调节字体
text-align：center；//⽔平居中
line-height：80px；//⾏⾼跟⽗级的⾼度是⼀样的
}
</stytle>
<div class="oneline">
content，⽂字只有⼀⾏
</div>
第⼗种：利⽤margin-top和margin-left【元素宽⾼需要设定】
position:absolute;  top:50%;
margin-top:-10px;  left:50%;
margin-left:-50px; }

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