使div水平垂直居中

1. flex 布局实现 （元素已知宽度）

效果图：

1.png

内部 div 要有宽度

  1. CSS 代码:
  2. <style>        
  3.     .box{            
  4.         width: 300px;            
  5.         height: 300px;           
  6.         background-color: #ccc;            
  7.         display: flex;            
  8.         display: -webkit-flex;            
  9.         justify-content: center;            
  10.         align-items: center;        
  11.     }        
  12.     .box .a{            
  13.         width: 100px;            
  14.         height: 100px;            
  15.         background-color: blue;        
  16.     }    
  17. </style>
  18. HTML 代码：
  19. <div class="box">        
  20.     <div class="a"></div>    
  21. </div>

2. position （元素已知宽度）

父元素设置为：position: relative;

子元素设置为：position: absolute;

距上50%，据左50%，然后减去元素自身宽度的一半距离就可以实现

效果图：

2.png

  1. CSS代码：
  2. <style>        
  3.     .box{            
  4.         width: 300px;            
  5.         height: 300px;            
  6.         background-color: red;            
  7.         position: relative;        
  8.     }        
  9.     .box .a{            
  10.         width: 100px;            
  11.         height: 100px;            
  12.         background-color: blue;            
  13.         position: absolute;            
  14.         left: 50%;            
  15.         top: 50%;            
  16.         margin: -50px 0 0 -50px;        
  17.     }    
  18.     </style>
  20. HTML 代码：
  21. <div class="box">        
  22.     <div class="a">love</div>    
  23. </div>

3. position transform （元素未知宽度）

如果元素未知宽度，只需将上面例子中的 margin: -50px 0 0 -50px;替换为：**transform: translate(-50%,-50%);**

效果图：

3.png

  1. CSS 代码：
  2. <style>        
  3.     .box{            
  4.         width: 300px;            
  5.         height: 300px;            
  6.         background-color: red;            
  7.         position: relative;        
  8.     }        
  9.     .box .a{            
  10.         background-color: blue;            
  11.         position: absolute;            
  12.         top: 50%;            
  13.         left: 50%;            
  14.         transform: translate(-50%, -50%);        
  15.     }    
  16. </style>

4. position（元素已知宽度）（left，right，top，bottom为0，maigin：auto ）

效果图：

4.png

  1. CSS 代码：
  2. <style>        
  3.     .box{            
  4.         width: 300px;            
  5.         height: 300px;           
  6.         background-color: red;            
  7.         position: relative;        
  8.     }        
  9.     .box .a{            
  10.         width: 100px;            
  11.         height: 100px;            
  12.         background-color: blue;            
  13.         position: absolute;            
  14.         top: 0;            
  15.         bottom: 0;            
  16.         left: 0;            
  17.         right: 0;            
  18.         margin: auto;        
  19.     }    
  20. </style>
  21. HTML 代码：
  22.  <div class="box">        
  23.     <div class="a">love</div>    
  24. </div>

★第四种情况方案中，如果子元素不设置宽度和高度，将会铺满整个父级（应用：模态框）

效果图：

5.png

  1. CSS 代码：
  2. <style>        
  3.     .box{            
  4.         width: 300px;            
  5.         height: 300px;            
  6.         background-color: red;            
  7.         position: relative;        
  8.     }        
  9.     .box .a{            
  10.         /* 如果不设置宽高，将铺满整个父级*/            
  11.         background-color: pink;            
  12.         position: absolute;            
  13.         left: 0;            
  14.         right: 0;            
  15.         top: 0;            
  16.         bottom: 0;            
  17.         margin: auto;            
  18.         text-align: center;                    
  19.     }    
  20. </style>
  21. HTML:
  22. <div class="box">
  23.     <div class="a">love</div>
  24. </div>

5. table-cell 布局实现

table 实现垂直居中，子集元素可以是块元素，也可以不是块元素

  1. CSS：
  2. <style>        
  3.     .box{            
  4.         width: 300px;            
  5.         height: 300px;            
  6.         background-color: red;            
  7.         display: table-cell;            
  8.         vertical-align: middle;                    
  9.     }        
  10.     .box .a{            
  11.         margin-left: 100px;            
  12.         width: 100px;            
  13.         height: 100px;            
  14.         background-color: blue;        
  15.     }    
  16. </style>
  18. <div class="box">         
  19.     <div class="a">love</div>    
  20. </div>

使内容（文字，图片）水平垂直居中（table-cell 布局）

行元素 text-align ：center；

块元素 ：margin ：0 auto；

  1. text-align : center  给元素的父级加，可以使文本或者行级元素(例如：图片)水平居中
  2. line-height : 值为元素的高度，可以使元素的文本内容垂直居中
  3. margin: 0 auto 使用条件：父级元素宽度可有可无，子级元素必须使块元素，而且要有宽度（否则继承父级）

display：table-cell 会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些 CSS 属性，使用 table-cell 时最好不要与 float 以及 position: absolute 一起使用，设置了 table-cell 的元素对高度和宽度高度敏感，对margin值无反应，可以响 padding 的设置，表现几乎类似一个 td 元素。

小结：

  1. 不要与 float：left， position : absolute， 一起使用

  2. 可以实现大小不固定元素的垂直居中

  3. margin 设置无效，响应 padding 设置

  4. 对高度和宽度高度敏感

  5. 不要对 display：table-cell 使用百分比设置宽度和高度

应用：

1. 使文字水平垂直居中

效果图：

6.png

  1. CSS 代码：
  2. <style>        
  3.     .box{            
  4.         width: 300px;            
  5.         height: 300px;            
  6.         background-color: red;            
  7.         display: table-cell;            
  8.         text-align: center;/*使元素水平居中 */            
  9.         vertical-align: middle;/*使元素垂直居中 */        
  10.     }    
  11. </style>
  13. HTML 代码：
  14. <div class="box">love</div>

给父级设置 display : table，子集设置 display：tablecell ，子集会充满全屏

7.png

  1. CSS 代码：
  2. <style>        
  3.     .box{            
  4.         width: 300px;            
  5.         height: 300px;            
  6.         background-color: red;            
  7.         display: table;        
  8.     }        
  9.     .box .a{            
  10.         display: table-cell;            
  11.         vertical-align: middle;            
  12.         text-align: center;            
  13.         background-color: blue;        
  14.     }    
  15. </style>
  17. HTML ：
  18. <div class="box">        
  19.     <div class="a">love</div>    
  20. </div>

2. 图片水平垂直居中

效果图：

8.png

  1. <style>        
  2.     .box{            
  3.         width: 300px;            
  4.         height: 300px;            
  5.         background-color: skyblue;            
  6.         display: table-cell;            
  7.         text-align: center;            
  8.         vertical-align: middle;        
  9.     }        
  10.     img{            
  11.         /* 设置成块元素后，text-align：center 就会失效 */            
  12.         width: 100px;            
  13.         height: 100px;        
  14.     }    
  15. </style>
  17. HTML：
  18. <div class="box">    
  19.     <img src="1.jpg" alt="">
  20. </div>

中间的图片会随着外层容器的大小而自动水平垂直居中，其实原理和文字水平垂直居中一模一样

3. 元素两端垂直对齐

  1. CSS 代码：
  2. <style>        
  3.     *{            
  4.         padding: 0;            
  5.         margin: 0;        
  6.     }        
  7.     .box{            
  8.         display: table;            
  9.         width: 90%;            
  10.         margin: 10px  auto;            
  11.         padding: 10px;             
  12.         border: 1px solid green;            
  13.         height: 100px;        
  14.     }        
  15.     .left,.right{            
  16.         display: table-cell;                        
  17.         width: 20%;            
  18.         border: 1px solid red;                 
  19.     }        
  20.     .center{            
  21.         /* padding-top: 10px; */            
  22.         height: 100px;            
  23.         background-color: green;        
  24.     }    
  25. </style>
  27. HTML：
  28. <div class="box">        
  29.     <div class="left">            
  30.         <p>我是左边</p>        
  31.     </div>        
  32.     <div class="center">            
  33.         <p>我是中间</p>       
  34.     </div>        
  35.     <div class="right">            
  36.         <p>我是右边</p>        
  37.     </div>    
  38. </div>

效果：9.png

其中 center 的顶部没有与左右两侧对齐，原因是 left 中的
有一个 margin-top ， 而表格布局中默认是文字顶部对齐的，所以 center 会向下移动到首行文字基线对齐，解决办法是为 center 添加与左右两侧中 margin-top 较大者等值的 padding-top 即可。