css中有几种方法可以实现水平垂直居中?针对这个问题,今天小编总结这篇有关水平垂直居中的文章,可供感兴趣的小伙伴们参考借鉴,希望对大家有所帮助。
水平居中
(1)使用inline-block+text-align
<div class="parent">
<div class="child">demo</div>
</div>
.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; } 缺点:兼容性存在一定问题
关于css中实现水平垂直居中的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果喜欢这篇文章,不如把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。