html中的水平垂直居中,css中实现水平垂直居中的几种方式

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赞

收藏

评论