css中实现水平垂直居中的几种方式
原创
杏sunshine2018-05-16 15:08:13©著作权
文章分类
css
阅读数
823
©著作权归作者所有:来自51CTO博客作者杏sunshine的原创作品,如需转载,请注明出处,否则将追究法律责任
https://blog.51cto.com/u_12885303/2116966
水平居中
(1)使用inline-block+text-align
demo
.child {
display:inline-block;
}
.parent {
text-align:center
}
原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。
优点:兼容性好,甚至可以兼容ie6、ie7
(2)使用table+margin
.child {
display:table
margin:0 auto;
}
原理:先将子框设置为块级表格来显示,再设置子框居中以达到水平居中。
缺点:不支持ie6、ie7,将div换成table
(3)使用absolute+transform
.child {
position:absolute;
left:50%;
transform:translateX(-50%)
}
.parent {
position:relative
}
缺点:transform属于css3内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀
(4)使用flex+margin
.child {
margin:0 auto
}
.parent {
display:flex
}
缺点:低版本浏览器(ie6 ie7 ie8)不支持
(5)使用flex+justify-content
.parent {
display:flex;
justify-content:center
}
缺点:低版本浏览器(ie6 ie7 ie8)不支持
垂直居中
(1)使用table-cell+vertical-align
.parent {
display:table-cell;
vertical-align:middle
}
(2)使用absolute+transform
.child {
position:absolute;
top:50%;
transform:translateY(-50%)
}
.parent {
position:relative
}
缺点:transform属于css3内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀
(3)使用flex+align-items
.parent {
display:flex;
align-items:center;
}
水平垂直居中
(1)使用absolute+transform(未知高度)
.parent {
position:relative;
}
.child {
position:absolute;
left:-50%;
top:-50%
transform:translate(-50%,-50%)
}
(1.1)使用absolute+transform(已知高度)
.parent {
position:relative;
}
.child {
position:absolute;
width:100px;
height:100px;
left:-50%;
top:-50%
margin: -50px 0 0 -50px;
}
(2)使用inline-block+text-align+table-cell+vertical-align
.parent {
text-align:center;
display:table-cell;
vertical-align:middle;
}
.child {
display:inline-block;
}
优点:兼容性较好
(3)使用flex+justify-content+align-items
.parent {
display:flex;
justify-content:center;
align-items:center;
}
缺点:兼容性存在一定问题
1赞
收藏
评论