资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

css实现垂直居中的方法有哪些

小编给大家分享一下css实现垂直居中的方法有哪些,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

创新互联公司是一家集网站建设,宁国企业网站建设,宁国品牌网站建设,网站定制,宁国网站建设报价,网络营销,网络优化,宁国网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

html结构

垂直居中

默认css样式结构

.box{
    width:200px;
    height:200px;
    background-color:green;   
}
.content{
    background-color:yellow;   
}

1. table-cell    

该方法兼容IE8+,火狐,谷歌,并且content是否有宽高都可以。  注:IE8+ 包含 IE8

.box2{
    display:table-cell;      //此元素会作为一个表格单元格显示(类似  和 )
    text-align:center;       //左右居中
    vertical-align:middle;   //上下居中        
}

css实现垂直居中的方法有哪些

2. display: flex;      

该方法不兼容IE8,IE9,content是否有宽高都可以。兼容火狐、谷歌

参考flex布局:https://www.cnblogs.com/qingchunshiguang/p/8011103.html

.box2{
    display: flex;
    justify-content:center;  //左右居中
    align-items:center;      //上下居中
}

css实现垂直居中的方法有哪些

3. 绝对定位和负边距      

该方法兼容IE8+,火狐,谷歌,content必须有宽高。

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-40px;
    margin-left:-40px;
}

4. 绝对定位和0      

该方法兼容IE8+,火狐,谷歌,content必须有宽高。

.box2{
    position:relative;
}
.content2{
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

5. 绝对定位和transform    

该方法不兼容IE8,兼容IE9+,火狐,谷歌,content是否有宽高都可以。

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

6.display:flex 和 margin:auto      

content有宽高:不兼容IE8,IE9,content没有宽高:不兼容IE。有无宽高都兼容火狐、谷歌。

.box2{
    display: flex;
    text-align: center;
}
.box2 .content2{margin: auto;}

看完了这篇文章,相信你对css实现垂直居中的方法有哪些有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


网页题目:css实现垂直居中的方法有哪些
分享网址:http://cdkjz.cn/article/jddhcp.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220