.container{背景颜色：灰色；高度：30rem；/*高度可以随意改变*/}.content{background-color:wheat;高度：10rem；width:10rem;}最终效果：1.使用margin:auto方法原理：margin:auto常用来设置水平居中。它会自动填充元素的可用空间。但对以下情况不起作用：elementPositioninlineelementfloatfloatingelementinlineblocklevelelementabsolute/fixed当我们通过position:absolute和top:0bottom:0设置元素垂直展开的可用空间时，然后元素可以自动填充父元素的可用尺寸。代码实现：.container{position:relative;/*设置父元素的相对位置*/}.content{position:absolute;顶部：0；/*设置四个方向的位置为0*/left:0;右：0；底部：0；保证金：自动；/*使用margin:auto实现垂直居中*/}2.使用top:50%;+translateY(-50%)原理：这种方法实现起来比较简单，但是前提是不需要做其他的transform变化。代码实现：.container{position:relative;/*设置父元素的相对位置*/}.content{position:absolute;顶部：50%；/*设置子元素的起始位置为父元素Position垂直方向的50%*/transform:translateY(-50%);/*最多平移子元素高度的50%*//*这两个可以同时实现水平居中transform:translate(-50%,-50%);left:50%*/}3.display:flex+margin:auto原理：flex容器默认有两个轴：主轴和横轴。默认的主轴是水平轴。通过控制子元素与这两个轴的对齐方式。可以相对容易地实现居中。将父元素设置为flex容器，加上margin:auto实现水平和垂直居中。这种方法可以说是最简单的了。代码实现：.container{display:flex;/*设置父元素为flex容器*/}.content{margin:auto;}4.原理是通过设置flex容器的justify-content和align-items属性实现的：flex布局中的两个属性justify-content：定义元素在主轴上的对齐方式，align-items：定义元素在横轴上的对齐方式。通过将两种对齐方式设置为居中，实现居中对齐代码。容器{显示：flex；证明内容：居中；align-items:center;}5.通过在flex中设置子元素的align-self属性原理：在flex布局中，可以通过设置子元素的align-self来单独定义对齐方式。它和align-items的区别在于：它定义在子元素上，会覆盖flex容器中定义的align-items属性代码实现-.container{display:flex;/*将父元素设置为flex容器*/}.content{align-self:center;保证金：0自动；/*实现水平居中，flex布局不支持justify-self*/}6.grid布局+margin：auto原理grid网格布局，将元素分为行和列，是二维布局。它经常被用来实现我们现在流行的瀑布展示模式。在居中方面，很像flex布局实现居中的原理。先确认容器，再通过相应的属性设置子元素的对齐方式。代码实现.container{display:grid;}.content{margin:auto;}7.grid布局，设置容器的align-content和justify-items原则justify-content属性设置整个内容区域在水平位置容器，align-content属性设置整个内容在容器内的垂直位置。代码实现.container{display:grid;对齐项目：居中；justify-content:center;}8.网格布局中单独设置子元素的对齐方式代码实现.container{display:grid;}.content{justify-self:center;/*设置子元素垂直居中*/align-self:center;/*设置子元素水平居中*/}总结：无论是垂直居中还是水平居中，要点是：首先确认参照物，比如position：相对父元素，flex容器或者grid容器，甚至我们在本文中没有提到的表格布局都是根据引用居中的。一种是通过marin:auto自动填充可用空间。或者通过一些控制对齐的属性实现居中。