css如何实现水平垂直居中-创新互联

这篇文章给大家分享的是有关css如何实现水平垂直居中的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

创新互联公司专业为企业提供宁武网站建设、宁武做网站、宁武网站设计、宁武网站制作等企业网站建设、网页设计与制作、宁武企业网站模板建站服务，十余年宁武做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

垂直居中的纯css方法

一、基于position：absolute，（但是绝对定位，会脱离文档流，对兄弟元素不友好）

1、position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;

2、margin: auto;position: absolute;top: 0;right:0;bottom: 0;left: 0;

以上两种div大小明确

3、transform:translate（-100px,-100px）；position: absolute;top: 50%;left: 50%;

二、大小不明确

4、display:flex;justify-content:center;align-items:center;

5、display：table,（会破坏页面整体布局）

.wrapper {
                height: 400px;
                width:600px;
                border: 2px solid pink;
                border-radius:10px;
                display:table;
            }
            .box {
                text-align:center;
                position:relative;
                display:table-cell;
                vertical-align:middle;
                background:#abcdef;
            }

   

        
    
adfagagafajkfhla
   
     

感谢各位的阅读！关于css如何实现水平垂直居中就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！

名称栏目：css如何实现水平垂直居中-创新互联
浏览地址：http://bjjierui.cn/article/deddpd.html