CSS实现水平垂直居中方法总结

时间：2021-03-23 19:34:11

dom结构：

 

<body>
<div class="big">
<div class="mid"></div>
</div>
</body>
 

CSS实现水平垂直居中方法总结
 

以下为实现.mid在.big里居中的方法： 


 

（一）利用绝对定位+transform
 

 

CSS样式：
 

 

 

.big{
position: relative;
width: 500px;
height: 400px;
background: #faebcc;
}
.mid{    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%,-50%);}

(二)利用绝对定位+margin（.mid宽高固定）
.big{    position: relative;    width: 500px;    height: 400px;    background: #faebcc;}
.mid{    position: absolute;
    top: 50%;
    left: 50%;
 width: 100px; height: 80px; margin: -40px 0 0 -50px;/*负值取宽、高的一半*/
}
（三）利用定位与margin：auto
.big{    position: relative;    width: 500px;    height: 400px;    background: #faebcc;}
.mid{    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;}

(四)利用display：table-cell
    CSS中有一个用于竖直居中的属性vertical-align，但只有 当父元素为td或者th时，这个vertical-align属性
才会生效，对于其他块级元素，例如 div、p等，默认情况下是不支持vertical-align属性的，设置块级元素的
display类型为table-cell，激活vertical-align属性，但display:table-cell存在兼容性问题，
所以这种方法没办法跨浏览器兼容。
.big{    display: table-cell;    vertical-align: middle;/*垂直*/    text-align: center;/*水平*/    width: 500px;    height: 400px;    background: #faebcc;}.mid{    display: inline-block;    width: 100px;    height: 80px;    background: #f65f57;}
(五)有更多CSS实现水平垂直居中的方法欢迎补充~~



标签：
相关文章