[分享]css三种绝对居中的办法

CSS中有三种常用的方法可以实现元素的绝对居中。下面分别介绍。

方法一：使用transform属性

.container {
   position: relative;  /* 确保父容器有定位属性 */
}
.center {
   position: absolute;  /* 设置为绝对定位 */
   top: 50%;            
   left: 50%;
   transform: translate(-50%, -50%);  /* 使用transform平移 */
} 

方法二：使用margin属性

.container {
   position: relative;  /* 确保父容器有定位属性 */
}
.center {
   position: absolute;  /* 设置为绝对定位 */
   top: 50%;
   left: 50%;
   margin-top: -50px;   
   margin-left: -50px;    /* 使用负的元素宽高的一半作为margin值 */
} 

方法三：使用flexbox布局

.container {
   display: flex;    /* 父容器使用flex布局 */
   justify-content: center;  /* 水平居中 */
   align-items: center;     /* 垂直居中 */
}
.center {
   /* 无需设置定位属性 */
} 

以上三种方法均可以实现元素的绝对居中，可以根据实际情况选择使用哪种方式。