CSS实现元素水平垂直居中对齐
HTML5学堂：前面给大家分享了网易NEC水平垂直居中的做法，但是开发中需要用到各种各样的水平垂直居中来实现，所以今天就给大家分享一下CSS实现水平垂直居中的做法。
第一种方法适用于文字
结构：
HTML5学堂、独行冰海、梦幻雪冰
样式：
.wrap {
width: 400px;
height: 400px;
background: #fcf;
line-height: 400px;
text-align: center;
}
原理：
行高等于高度的时候，文字处于垂直居中，设置了text-align: center的时候，文字处于水平居中；
效果：
第二种方法适用于图片
结构：
样式：
.wrap {
width: 400px;
height: 400px;
background: #fcf;
line-height: 400px;
text-align: center;
}
.wrap img {
width: 200px;
height: 200px;
vertical-align: middle;
}
效果：
优点：
结构简单，容易实现和理解
缺点：
在IE6浏览器不兼容此方法
那么如何解决在IE6不支持该方法呢，其实很简单，如下：
结构：
样式：
.wrap {
width: 400px;
height: 400px;
background: #fcf;
line-height: 400px;
text-align: center;
}
.wrap img {
width: 200px;
height: 200px;
vertical-align: middle;
}
.wrap span {
display: inline-block;
}
注意：添加了span标签，并且设置display属性设置为inline-block来使我们span标签拥有"layout"，这样就解决了在IE6不能兼容的问题.
缺点：
无形中添加了空标签，所以不建议使用
第三种方法利用position和margin进行元素水平垂直居中
结构：
梦幻雪冰
样式：
.wrap {
position: relative;
width: 400px;
height: 400px;
background: #fcf;
}
.box {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
background: #999;
}
原理：
效果：
欢迎沟通交流~HTML5学堂
第四种方法利用position进行元素水平垂直居中
结构：
HTML5学堂
样式：
.wrap {
position: relative;
width: 400px;
height: 400px;
background: #fcf;
}
.box {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 200px;
height: 200px;
margin: auto;
background: #999;
}
原理：
设置了绝对定位的话，CSS属性top、bottom、left、right都为0的话，这是不可能的，因为.box的元素有设置宽高，所以你只要在设置一个margin：auto，自然就居中了。
效果：
第五种方法利用display：table与table-cell进行元素水平垂直居中
结构：
梦幻雪冰
样式：
.wrap {
display: table;
height: 400px;
width: 400px;
background: #fcf;
}
.box {
display: table-cell;
vertical-align: middle;
}
.con {
width: 200px;
height: 200px;
margin: 0 auto;
background: #999;
}
效果：
优点：
这种方法不会像前面的两种方法一样，有高度的限制，此方法可以要据元素内容动态的改变高度，从而也就没有空间的限制，元素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。
缺点：
不足之处呢？这种方法只适合现代浏览器，在IE6-7下无法正常运行。
那么如何解决兼容IE6、IE7呢？
结构：
梦幻雪冰
样式：
.wrap {
position: relative;
display: table;
height: 400px;
width: 400px;
background: #fcf;
}
.box {
display: table-cell;
vertical-align: middle;
*position: absolute;
*top: 50%;
*left: 50%;
}
.out {
*position:relative;
*top: -50%;
*left: -50%;
}
.con {
width: 200px;
height: 200px;
margin: 0 auto;
background: #999;
}
第六种方法利用display：table-cell进行元素水平垂直居中
结构：
梦幻雪冰
样式：
.wrap {
display: table-cell;
width: 400px;
height: 400px;
background: #fcf;
vertical-align: middle;
}
.box {
width: 200px;
height: 200px;
margin: 0 auto;
background: #999;
}
效果：
优点：
这种方法的优点和方法三是一样的，不会有高度的限制。
缺点：
IE6、IE7不支持
第七种方法元素(空标签)水平垂直居中
结构：
独行冰海、梦幻雪冰
样式：
html,
body {
height: 100%;
}
.box {
position: relative;
clear:both;
height: 300px;
width: 300px;
margin: 0 auto;
background: #999;
}
.floater {
float:left;
height:50%;
margin-bottom: -150px;
background: #fcf;
}
效果
相关文章推荐
欢迎沟通交流~HTML5学堂