div水平垂直居中的方法

本是古典何须时尚 2021-07-25 12:55 519阅读 0赞

在平时，我们经常会遇到让一个div框针对某个模板上下左右都居中(水平垂直居中)，其实针对这种情况，我们有很多种方法实现。  
**方法一：**  
  绝对定位法，不确定当前div宽度和高度，采用 transform: translate(-50%,-50%);，当前div的父级添加相对定位（position: relative;）  
效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center]

.one{ 
            width: 200px;
            height: 200px;
            background: #4a5064;
            position: relative;
        }
        .two{ 
            width: 100px;
            height: 100px;
            background: #007aff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);//与方法二不同处
        }

**方法二：**  
  绝对定位的方法：确定要居中的div宽度，margin值为要居中div宽度一半的负值。  
代码如下：

.one{ 
            width: 200px;
            height: 200px;
            background: #4a5064;
            position: relative;
        }
        .two{ 
            width: 100px;
            height: 100px;
            background: #007aff;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;//与方法一不同处
            margin-top: -50px;//与方法一不同处
        }

**方法三:**  
  绝对定位的方法：绝对定位下top、left、reign、bottom 都设置为0。  
代码如下：

.one{ 
            width: 200px;
            height: 200px;
            background: #4a5064;
            position: relative;
        }
        .two{ 
            width: 100px;
            height: 100px;
            background: #007aff;
            position: absolute;
            left: 0;//代码不同处
            right: 0;//代码不同处
            top: 0;//代码不同处
            bottom: 0;//代码不同处
            margin: auto;//代码不同处
        }

**方法四：**  
  flex布局方法：当前div的父级添加flex css样式。  
代码如下：

.one{ 
            width: 200px;
            height: 200px;
            background: #4a5064;
            display: flex;
            align-items: center;
            justify-content: center;
    
            -webkit-display:flex;//兼容safari浏览器
            -webkit-align-items: center;//兼容safari浏览器
            -webkit-justify-content: center;//兼容safari浏览器
        }
        .two{ 
            width: 100px;
            height: 100px;
            background: #007aff;
        }

**方法五：**  
  table-cell实现水平垂直居中：table-cell middle center 结合使用。**垂直居中的如果是div 等块级元素，需设置display: inline-block;**  
代码如下：

.one{ 
            width: 200px;
            height: 200px;
            background: #4a5064;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        .two{ 
            width: 100px;
            height: 100px;
            background: #007aff;
            display: inline-block;
        }

**方法六：**  
  绝对定位：calc( ) 函数动态计算水平居中。  
代码如下：

.one{ 
            position: relative;
            width: 200px;
            height: 200px;
            background: #4a5064;
        }
        .two{ 
            position: absolute;
            width: 100px;
            height: 100px;
            background: #007aff;
            left: -webkit-calc((200px - 100px)/2);//兼容chrome、safari
            top: -webkit-calc((200px - 100px)/2);//兼容chrome、safari
            left: calc((200px - 100px)/2);//重点 减号 两边要有空格!!!!!!
            top:calc((200px - 100px)/2) ;
            left: -moz-calc((200px - 100px)/2);//兼容火狐浏览器
            top: -moz-calc((200px - 100px)/2);//兼容火狐浏览器
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/a39e5c53eabc47969ad39a75989f7506.png