您当前位置:新疆网站建设-新疆网站制作-新疆二域设计 >技术教程 >前端教程 >CSS教程 >浏览信息

CSS代码实现水平垂直居中

发布时间:2015/11/18 23:46:38点击数(0)

最近遇到很多居中的问题,就花点时间总结了一下放在这里,以后找也方便,0.0~~ 

1.居中文本

<div class="wrap">

我在中间……

</div>

1.1. height+line-height+text-center(只能居中单行)

.wrap{

    width:200px; 

    height:200px;

    border:1px solid red; 

    text-align: center;

    line-height: 200px;

}

ps:text-align:center只是将元素下面的内联元素居中显示




1.2display:table-cell(多行固定高度居中)


.wrap{

    width:200px; 

    height:200px;

    border:1px solid red; 

    text-align: center; 

    display:table-cell; 

    vertical-align: middle;

}


display:table-cell:ie67不管用,最好配合display:table;一起用

ie67下:(以后也不用了,不过也放这儿吧)

方法一:(通过em标签高度与父级等高,所以span和em居中就相当于span在父级居中)

<div class="wrap">

<span>

我在中间…… 我在中间…… 我在中间…… 我在中间……

</span>

<em></em>

</div>


.wrap{

    width:200px; 

    height:200px;

    border:1px solid red; 

    text-align: center;

}

.wrap span{

    vertical-align: middle;

    display:inline-block; 

    width:180px;

}

.wrap em{

    height:100%;

    vertical-align: middle; 

    display:inline-block;

}



方法二:(通过给子元素增加一个绝对定位的父级标签,再配合子元素的相对定位水平垂直居中)

<div class="wrap">

<span class="span1">

<span class="span2">我在中间…… 我在中间…… 我在中间…… 我在中间……</span>

</span>

</div>


.wrap{

    width:200px; 

    height:200px;

    border:1px solid red;

    display:table;

    position:relative; 

    overflow: hidden;

}

.wrap .span1{

    display:table-cell; 

    vertical-align: middle; 

    text-align: center;

    *position:absolute;

    top:50%;

    left:50%;

}

.wrap .span2{

    *position:relative;

    top:-50%;

    left:-50%;

}




1.3padding(内填充,不用多说)

.wrap{

width:200px;

border:1px solid red;

padding:50px 0;

}


关键字:
上一篇: 没有了
下一篇:兼容IE6/IE7/IE8/FireFox的css hack
0