公共的 CSS 样式：
.parent {width: 300px;height: 300px;background-color:#d0e4fe;
}.child {width: 100px;height: 100px;background-color:orange;
}
HTML:
<div class="parent"><div class="child"></div>
</div>
最终居中效果如下：
一. 行内元素
方法一：text-align + vertical-align
.parent {line-height: 300px;text-align: center; /* 水平居中*/
}.child {display: inline-block; /* 子元素设置为行内块元素*/vertical-align: middle; /* 垂直居中*/
}
二. position 定位
情况一：居中元素定宽定高
方法二：absolute + calc()
.parent {positon: relative; /*使子元素相对父元素绝对定位*/
}.child {position: absolute;top: calc(50% - 50px); /*垂直居中*/left: calc(50% - 50px); /*水平居中*/
}
注意：在 calc() 函数中，运算符前后必须要有空格，否则会导致计算错误。
方法三：absolute + 负 margin
.parent {positon: relative; /*使子元素相对父元素绝对定位*/
}.child {position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;
}
margin 负值：当 margin-left 或 margin-top 属性值为负值时，元素会根据负值的大小向左或向上偏移。当 margin-right 或 margin-bottom 属性值为负值时，元素的位置不会改变，但会影响其身后的元素。这种情况相当于元素宽度或高度缩小，后续的元素会向该元素偏移。
方法四：absolute + margin auto
.parent {positon: relative; /*使子元素相对父元素绝对定位*/
}.child {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
}
margin 设置为 auto 表示自动填充剩余空间。
由于块级元素默认宽度为父元素的宽度，默认高度为内容的高度。因此，在水平方向上，margin: auto 使得左右平分剩余空间达到水平居中的效果。但在垂直方向上，由于没有剩余空间，所以 margin:auto 不能实现垂直居中。
要想通过 margin: auto 实现垂直居中，需要将子元素设置为 position: absolute，同时需要设置 left: 0; right: 0; top: 0; bottom: 0; 来使子元素在水平和垂直方向上都填满父元素，这样再设置 margin: auto 就可以实现水平和垂直方向上都平分剩余空间，达到居中效果。
情况二：不需要子元素固定宽高
方法五：absolute + transform
.parent {positon: relative;
}.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
实现原理：top 和 left 表示向下和向右偏移父元素宽度或高度的 50%，translate(-50%, -50%) 表示向上和向左偏移自身宽度或高度的 50%，从而实现上下左右居中。
三. flex 布局
方法六：flex
.parent {display: flex;justify-content: center; /* 水平居中*/align-items: center; /* 垂直居中*/
}
或
.parent {display: flex;
}.child {margin: auto;
}
四. grid 布局
方法七：grid
.parent {display: grid;justify-items: center;align-items: center; /*简写为 place-items: center; */
}
或
.parent {display: grid;justify-content: center;align-content: center; /*简写为 place-content: center; */
}
或
.parent {display: grid;
}.child {justify-self: center;align-self: center; /*简写为 place-self: center; */
}
或
.parent {display: grid;
}.child {margin: auto;
}
