flex布局

使用flex，只需要给父元素设置即可。若想只水平/垂直居中，则注释对应代码即可。

           /* 父元素 */
            .container{
  
                width: 500px;
                height: 500px;
                background-color: blue;

                display:flex;
                align-items: center ;   /*控制垂直居中*/
                justify-content: center;/*控制水平居中*/
            }
            /* 子元素 */
            .item{
  
                width: 200px;
                height: 200px;
                background-color: red;
            }

• grid布局

使用grid，与flex类似。只需要给父元素设置即可。若想只水平/垂直居中，则注释对应代码即可。

            /* 父元素 */
            .container{
  
                width: 500px;
                height: 500px;
                background-color: blue;

                display:grid;
                align-items: center ;   /*控制垂直居中*/
                justify-content: center;/*控制水平居中*/
            }
            /* 子元素 */
            .item{
  
                width: 200px;
                height: 200px;
                background-color: red;
            }

• margin:auto

在使用 margin:auto使元素居中时，需要给父元素设置为position:relative;子元素设置position: absolute;具体实现垂直水平居中的代码如下。

 /* 父元素 */
            .container{
  
                width: 500px;
                height: 500px;
                background-color: blue;

                position: relative;
            }
            /* 子元素 */
            .item{
  
                width: 200px;
                height: 200px;
                background-color: red;
               
                position: absolute;
                
                /* 垂直居中 */
                /* 
                top: 0; 
                bottom: 0; 
                margin: auto 0; 
                */

                /* 水平居中 */
                /*                 
                left: 0; 
                right: 0; 
                margin: 0 auto; 
                */

                /* 水平+垂直居中 */               
                left: 0; 
                right: 0; 
                top: 0; 
                bottom: 0; 
                margin: auto; 
               
            }

• translate

• 在使用 translate使元素居中时，需要给父元素设置为position:relative;子元素设置position: absolute;具体实现垂直水平居中的代码如下。

            /* 父元素 */
            .container{
  
                width: 500px;
                height: 500px;
                background-color: blue;

                position: relative;
            }
            /* 子元素 */
            .item{
  
                width: 200px;
                height: 200px;
                background-color: red;
               
                position: absolute;
                
                /* 水平居中 */
                /* left:50%;
                transform: translate(-50%, 0); */
                
                /* 垂直居中 */
                /* top:50%;
                transform: translate(0, -50%); */

                /* 水平+垂直居中 */
                left:50%;
                top:50%;
                transform: translate(-50%, -50%);
            }