元素居中的三种方式

た入场券 2022-12-26 00:54 189阅读 0赞

# 元素居中的三种方式 #

### 面试题 ###

##### 如何让一个元素在父元素中上下左右居中？ #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]

###### 共同的dom结构如下： ######

###### 方法一：父相自绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)）`最常用方法` ######

#box{ 
             width: 400px;
             height: 400px;
             background: red;
             position: relative;
         }
         #x{ 
             width: 200px;
             height: 200px;
             background: yellow;
             position: absolute;
             left: 50%;
             top: 50%;
             margin-left: -100px;
             margin-top: -100px;
         }

##### 方法二：父元素设置成弹性盒，子元素横向居中，纵向居中 #####

#box{ 
             width: 400px;
             height: 400px;
             background: red;
             display: flex;
             justify-content: center;
             align-items: center;
        
         }
         #x{ 
             width: 200px;
             height: 200px;
             background: yellow;
           
         }

###### 方法三：父向子绝，子元素所有定位为0，margin设置auto自适应。 ######

#box{ 
             width: 400px;
             height: 400px;
             background: red;
             position: relative;
         }
         #x{ 
             width: 200px;
             height: 200px;
             background: yellow;
             position: absolute;
             left: 0;
             top: 0;
             right: 0;
             bottom: 0;
             margin: auto;
           
         }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]: /images/20221120/4b53f238b91f461eb05847e57bf0ee0c.png