horizo??ntalcentering水平居中：给div设置一个宽度，然后加上margin:0auto属性div{width:200px;margin:0auto;}水平居中，使用text-align:center实现.container{background:rgba(0,0,0,0.5);文本对齐：居中；font-size:0;}.box{display:inline-block;宽度：500px；高度：400px；background-color:pink;}让绝对定位div{position:absolute;宽度：300px；高度：300px；保证金：自动；顶部：0；左：0；底部：0；右：0；背景色：粉色；/*简单看效果*/}水平垂直居中水平垂直居中1/*确定容器的宽高宽500高300的图层设置图层外边距div{*/position:absolute;/*绝对定位*/width:500px;height:300px;top:50%;left:50%;margin:-150px-250px;/*外边距为自身宽高的一半*/background-color:pink;/*效果一目了然*/}水平和垂直居中两种/*未知容器宽高，使用`transform`属性*/div{position:absolute;/*可以使用相对定位或者绝对定位*/width:500px;高度：300px；顶部：50%；左：50%；转换：翻译（-50%，-50%）；背景色：粉色；/*很容易看到效果*/}水平和垂直居中3/*使用flex布局时要考虑兼容性*/.container{display:flex;对齐项目：居中；/*垂直居中*/justify-content:center;/*水平居中*/}.containerdiv{宽度：100px；高度：100px；背景色：粉色；/*效果一目了然*/}水平垂直居中四项/*使用text-align:center和vertical-align:middle属性*/.container{position:fixed;顶部：0；右：0；底部：0；左：0；背景：rgba(0,0,0,0.5);文本对齐：居中；字体大小：0；空白：nowrap；:auto;}.container::after{内容:"";显示：内联块；高度：100%；vertical-align:middle;}.box{display:inline-block;宽度：500px；高度：400px；背景色：粉色；空白：正常；vertical-align:middle;}总结一下，常见的几种居中方式有：对于固定宽高的元素（1）我们可以使用margin:0auto来实现元素的水平居中（2）使用绝对定位，设置值四个方向的值为0，margin设置为auto。由于宽度和高度是固定的，所以相应的方向平分，就可以实现水平和垂直方向的居中。(3)使用绝对定位，先通过top:50%和left:50%将元素的左上角定位到页面中心，然后通过调整元素的中心点到页面中心保证金的负值。(4)使用绝对定位，先通过top:50%和left:50%将元素的左上角定位到页面中心，然后通过translate将元素的中心点调整到页面中心.(5)使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平居中对齐，其子元素也可以实现垂直和水平居中。对于变宽高的元素，上面后两种方法可以实现元素的垂直居中和水平居中。
