元素水平垂直居中的方法有哪些?如果元素不定宽高呢？

一、元素水平垂直居中的方法

1. 通过flex布局
   使用flex布局可以很方便地实现元素的垂直和水平居中，只需要在父容器上设置display:flex和justify-content:center,align-items:center即可

.parent {
    
    
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 使用绝对定位和transform属性
   通过将子元素的position属性设置为absolute，left和top值都为50%，然后通过translate函数将其往左和往上移动子元素宽高一半的距离

.parent {
    
    
   position: relative;
 }
 .child {
    
    
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

二、元素不定宽高时的水平垂直居中方法

1. 使用table-cell布局
   使用table-cell布局同样可以实现元素的垂直和水平居中

.parent {
    
    
   display: table-cell;
   text-align:center;
   vertical-align:middle;
 }

注意：需要在父容器上加上display:table;来使display:table-cell生效。

2. 使用grid布局
   参考方式一中的内容，可以将display：flex改写成 display:grid，并添加如下内容，

.parent {
    
    
   ...
  
   display: grid;
   place-items: center;
}