div 垂直居中的六种方法

作者:我爱我家  查看次数:77 次;  更新时间:2019/8/22;

1. flex 布局实现 (元素已知宽度)

效果图:


内部 div 要有宽度

CSS 代码: <style>             .box{                     width: 300px;                     height: 300px;                    background-color: #ccc;                     display: flex;                     display: -webkit-flex;                     justify-content: center;                     align-items: center;             }             .box .a{                     width: 100px;                     height: 100px;                     background-color: blue;             }     </style> HTML 代码: <div class="box">             <div class="a"></div>     </div>复制代码

2. position (元素已知宽度)

父元素设置为:position: relative;            子元素设置为:position: absolute;            距上50%,据左50%,然后减去元素自身宽度的一半距离就可以实现

效果图:


CSS代码: <style>             .box{                     width: 300px;                     height: 300px;                     background-color: red;                     position: relative;             }             .box .a{                     width: 100px;                     height: 100px;                     background-color: blue;                     position: absolute;                     left: 50%;                     top: 50%;                     margin: -50px 0 0 -50px;             }         </style> HTML 代码: <div class="box">             <div class="a">love</div>     </div> 复制代码

3. position transform (元素未知宽度)

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

效果图:


CSS 代码: <style>             .box{                     width: 300px;                     height: 300px;                     background-color: red;                     position: relative;             }             .box .a{                     background-color: blue;                     position: absolute;                     top: 50%;                     left: 50%;                     transform: translate(-50%, -50%);             }     </style> 复制代码

4. position(元素已知宽度)(left,right,top,bottom为0,maigin:auto )

效果图:


CSS 代码: <style>             .box{                     width: 300px;                     height: 300px;                    background-color: red;                     position: relative;             }             .box .a{                     width: 100px;                     height: 100px;                     background-color: blue;                     position: absolute;                     top: 0;                     bottom: 0;                     left: 0;                     right: 0;                     margin: auto;             }     </style> HTML 代码:  <div class="box">             <div class="a">love</div>     </div> 复制代码

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

效果图:


CSS 代码: <style>             .box{                     width: 300px;                     height: 300px;                     background-color: red;                     position: relative;             }             .box .a{                     /* 如果不设置宽高,将铺满整个父级*/                     background-color: pink;                     position: absolute;                     left: 0;                     right: 0;                     top: 0;                     bottom: 0;                     margin: auto;                     text-align: center;                         }     </style> HTML: <div class="box">     <div class="a">love</div> </div>复制代码

5. table-cell 布局实现

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

CSS: <style>             .box{                     width: 300px;                     height: 300px;                     background-color: red;                     display: table-cell;                     vertical-align: middle;                         }             .box .a{                     margin-left: 100px;                     width: 100px;                     height: 100px;                     background-color: blue;             }     </style> <div class="box">              <div class="a">love</div>     </div>



}