css各种水平垂直居中

Posted 黑客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css各种水平垂直居中相关的知识,希望对你有一定的参考价值。

css各种水平垂直居中,网上查了一下,总结以下几种

line-height垂直居中

缺点,仅限于单行文字

 

.item{  
    text-align: center;  
    height: 100px;   
    line-height: 100px;   
}  

效果:http://runjs.cn/code/rmjiq3a8

 

padding垂直居中
缺点,内容不确定时,高度不好固定

.item{  
    padding: 40px 0;  
}  

效果:http://runjs.cn/code/hg5yrpm8

 

margin垂直居中

需要知道父层和子层高度,然后marginLeft && marginTop = 父层/2 - 子层/2;
缺点,不灵活

.wrap{  
    height: 100px;  
    width: 220px;  
}  
.item{  
    width: 100px;  
    height: 30px;   
    margin-top: 35px;  
    margin-left: 60px;  
}  

效果:http://runjs.cn/code/tvewrftd

 

position垂直居中

需要知道子层高度,根据子层高度来设置margin;
缺点,不灵活

.wrap{  
    position: relative;  
    width:220px;  
    height: 200px;  
}  
.item{  
    position: absolute;  
    width: 100px;  
    height: 50px;  
    left: 50%;  
    top: 50%;  
    margin-left: -50px;  
    margin-top: -25px;  
}  

效果:http://runjs.cn/code/hkpk8zdr

 

position垂直居中二
内容div固定宽高,不固定宽高都可以,但是父层貌似必须有宽高。
缺点:父层宽高,比较灵活

.wrap{  
    position: relative;  
    width:220px;  
    height: 200px;  
}  
.item{  
    width: 100px;height: 50px;  
    margin:auto;  
    position: absolute;  
    left: 0px;   
    top: 0px;   
    right:0px;   
    bottom: 0px;  
}  

效果:http://runjs.cn/code/lo7kn0lx

 

css3的calc垂直居中
也是需要知道父层宽高和自身宽高;
缺点,不灵活,兼容性

.wrap{  
    width:220px;  
    height: 150px;  
    overflow: hidden;  
}  
.item{  
    width: 100px;  
    height: 40px;   
    margin:0 auto;  
    margin-top: calc(150px/2 - 40px/2);  
}  

效果:http://runjs.cn/code/jsuy1smh

 

css3的translate垂直居中
这个是最方便,尤其在移动端,简直神器!

.wrap{  
    width:220px;  
    height: 150px;  
    overflow: hidden;  
}  
.item{  
    width: 100px;  
    height: 40px;  
    margin:0 auto;   
    position: relative;   
    top: 50%;  
    transform:translate3d(0px,-50%,0px);  
}  

效果:http://runjs.cn/code/wnpyt6qq

 

text-align + vertical-align垂直居中
添加一个占位标签。
没啥大缺点,多加了一个标签

.wrap{  
    height: 150px;  
    width:220px;  
}  
.placeholder{  
    overflow: hidden;  
    width: 0;  
    min-height: inherit;  
    height: inherit;  
    vertical-align: middle;  
    display: inline-block;  
}  
  
.item{  
    width: 100px;  
    height: 50px;   
    vertical-align: middle;  
    display: inline-block;  
}

效果:http://runjs.cn/code/pvopbrds

 

text-align + line-height垂直居中
缺点:父元素必须有个行高。

.wrap{  
    line-height: 200px;  
}  
.item{  
    line-height: normal;  
    vertical-align: middle;  
    display: inline-block;  
} 

效果:http://runjs.cn/code/oldyl2ee

 

flex垂直居中。
唯一缺点就是兼容性了.

.wrap{  
    display: -webkit-box;  
    display: -moz-box;      
    display: -ms-flexbox;   
    display: -webkit-flex;  
    display: flex;  
    height: 150px;  
}  
.item{  
    margin:auto; //这句话是关键  
    width: 100px;  
    height: 50px;  
}  

效果:http://runjs.cn/code/g8wqi2kx

 

flex垂直居中二
唯一缺点就是兼容性

.wrap{  
    display: -webkit-box;  
    display: -moz-box;      
    display: -ms-flexbox;   
    display: -webkit-flex;  
    display: flex;  
    height: 150px;  
    align-items: center ;  
    justify-content: center;  
}  
.item{  
    width: 100px;  
    height: 50px;  
    background: #555;  
    line-height: 50px;  
}  

效果:http://runjs.cn/code/qsdrl4tk

 

table垂直居中
利用table表格的属性,来居中元素

.wrap{  
    display: table-cell;  
    vertical-align: middle;   
    text-align: center;  
    height: 150px;  
}  
.item{  
    width: 100px;  
    line-height: 50px;  
    display: inline-block; //转换为内联元素  
} 

效果:http://runjs.cn/code/6flrxvh2

 

使用button标签

.wrap{  
    height: 150px;  
    background: #222;  
    border-radius: 0px;  
    border:none;  
    display:block;  
    margin:20px auto;  
    width: 220px;  
}  
.item{  
    width: 100px;  
    line-height: 50px;   
    display: inline-block;  
}  

效果:http://runjs.cn/code/1zvstbad

 

抄袭于:http://itakeo.com/blog/2015/09/17/csscenter/?none=121

 

以上是关于css各种水平垂直居中的主要内容,如果未能解决你的问题,请参考以下文章

用CSS如何实现单行图片与文字垂直居中

大小不固定的图片和多行文字的垂直水平居中

转 图片多行文字的水平垂直居中

CSS水平居中与垂直居中的总结

css实现水平垂直居中

各种情况的水平垂直居中