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）
.allCenterChild{
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;//设置为表格单元
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【元素宽高需要设定】
.allCenterChild{
position:absolute;
top:50%;
margin-top:-10px;
left:50%;
margin-left:-50px;
}