css中水平和垂直居中

CSS中的水平和垂直居中是经常用到的样式，下面分别介绍它们的实现方法：

1、水平居中

.parent {
   display: flex;
   justify-content: center; /* 设置水平居中 */
} 

在父元素上设置display: flex，这样子元素就可以使用justify-content属性来控制水平方向的位置，设置为center即为水平居中。

2、垂直居中

.parent2 {
   display: flex;
   align-items: center; /* 设置垂直居中 */
} 

在父元素上设置display: flex，这样子元素就可以使用align-items属性来控制垂直方向的位置，设置为center即为垂直居中。

3、水平和垂直居中

.parent3 {
   position: relative;
}

.parent3 .child {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); /* 设置水平和垂直居中 */
} 

通过父元素设置position: relative，子元素设置position: absolute来实现相对于父元素的绝对定位，然后设置top: 50%和left: 50%将子元素放置在父元素的中间位置，最后使用transform属性中的translate来调整位置实现水平和垂直居中。