div水平垂直居中的六种方法

div水平垂直居中的六种方法

 

在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现。

方法一:

　　绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

　　图片展示：

　　

　　代码如下：

1 2 3 4 5 6 7

div{     background:red;     position: absolute;     left:50%;     top:50%;     transform: translate(-50%, -50%); }

　

方法二:

　　绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值

　　图片展示： 如方法一的图片展示

　　代码如下：

1 2 3 4 5 6 7 8 9 10

div{     width:600px;     height: 600px;     background:red;     position: absolute;     left:50%;     top:50%;     margin-left:-300px;     margin-top:-300px; }

　　

方法三：

　　绝对定位方法：绝对定位下top left right bottom 都设置0

　　图片展示： 如方法一的图片展示

　　代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13

<!--html--><div class="child">我是子级</div> /**css**/ div.child{     width: 600px;     height: 600px;     background: red;     position:absolute;     left:0;     top: 0;     bottom: 0;     right: 0;     margin: auto; }

　　

方法四:

　　flex布局方法：当前div的父级添加flex css样式

      展示图如下：

　　

　　代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!--html--><div class="box">     <div class="child">child</div> </div>/**css**/.box{     height:800px;     -webkit-display:flex;     display:flex;     -webkit-align-items:center;     align-items:center;     -webkit-justify-content:center;     justify-content:center;     border:1px solid #ccc; } div.child{     width:600px;     height:600px;     background-color:red; }

　　

方法五:

　　table-cell实现水平垂直居中: table-cell middle center组合使用

      展示图如下：

    

      代码如下：

1 2 3 4 5 6 7 8 9 10

<!--html--><div class="table-cell">     <p>我爱你</p> </div>/**css**/.table-cell {     display: table-cell;     vertical-align: middle;     text-align: center;     width: 240px;     height: 180px;     border:1px solid #666; }

　　

方法六:

　　绝对定位：calc() 函数动态计算实现水平垂直居中

　　展示图如下：

　　代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!--html--> <div class="calc">     <div class="child">calc</div> </div> /**css**/ .calc{   position: relative;<br>  border: 1px solid #ccc;<br>  width: 400px;<br>  height: 160px; } .calc .child{   position: absolute;<br>  width: 200px;<br>  height: 50px;   left:-webkit-calc((400px - 200px)/2);   top:-webkit-calc((160px - 50px)/2);   left:-moz-calc((400px - 200px)/2);   top:-moz-calc((160px - 50px)/2);   left:calc((400px - 200px)/2);   top:calc((160px - 50px)/2); }

div水平垂直居中的六种方法

 

在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现。

方法一:

　　绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

　　图片展示：

　　

　　代码如下：

1 2 3 4 5 6 7

div{     background:red;     position: absolute;     left:50%;     top:50%;     transform: translate(-50%, -50%); }

　

方法二:

　　绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值

　　图片展示： 如方法一的图片展示

　　代码如下：

1 2 3 4 5 6 7 8 9 10

div{     width:600px;     height: 600px;     background:red;     position: absolute;     left:50%;     top:50%;     margin-left:-300px;     margin-top:-300px; }

　　

方法三：

　　绝对定位方法：绝对定位下top left right bottom 都设置0

　　图片展示： 如方法一的图片展示

　　代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13

<!--html--><div class="child">我是子级</div> /**css**/ div.child{     width: 600px;     height: 600px;     background: red;     position:absolute;     left:0;     top: 0;     bottom: 0;     right: 0;     margin: auto; }

　　

方法四:

　　flex布局方法：当前div的父级添加flex css样式

      展示图如下：

　　

　　代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!--html--><div class="box">     <div class="child">child</div> </div>/**css**/.box{     height:800px;     -webkit-display:flex;     display:flex;     -webkit-align-items:center;     align-items:center;     -webkit-justify-content:center;     justify-content:center;     border:1px solid #ccc; } div.child{     width:600px;     height:600px;     background-color:red; }

　　

方法五:

　　table-cell实现水平垂直居中: table-cell middle center组合使用

      展示图如下：

    

      代码如下：

1 2 3 4 5 6 7 8 9 10

<!--html--><div class="table-cell">     <p>我爱你</p> </div>/**css**/.table-cell {     display: table-cell;     vertical-align: middle;     text-align: center;     width: 240px;     height: 180px;     border:1px solid #666; }

　　

方法六:

　　绝对定位：calc() 函数动态计算实现水平垂直居中

　　展示图如下：

　　代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!--html--> <div class="calc">     <div class="child">calc</div> </div> /**css**/ .calc{   position: relative;<br>  border: 1px solid #ccc;<br>  width: 400px;<br>  height: 160px; } .calc .child{   position: absolute;<br>  width: 200px;<br>  height: 50px;   left:-webkit-calc((400px - 200px)/2);   top:-webkit-calc((160px - 50px)/2);   left:-moz-calc((400px - 200px)/2);   top:-moz-calc((160px - 50px)/2);   left:calc((400px - 200px)/2);   top:calc((160px - 50px)/2); }