CSS实现元素水平垂直居中对齐

HTML5学堂：前面给大家分享了网易NEC水平垂直居中的做法，但是开发中需要用到各种各样的水平垂直居中来实现，所以今天就给大家分享一下CSS实现水平垂直居中的做法。

第一种方法适用于文字

结构：

1. <div class="wrap">
2.     HTML5学堂、独行冰海、梦幻雪冰
3. </div>

样式：

1. .wrap {
2.     width: 400px;
3.     height: 400px;
4.     background: #fcf;
5.     /*行高等于高度,垂直居中*/
6.     line-height: 400px;
7.     /*水平居中*/
8.     text-align: center;
9. }

原理：

行高等于高度的时候，文字处于垂直居中，设置了text-align: center的时候，文字处于水平居中；

效果：

第二种方法适用于图片

结构：

1. <div class="wrap">
2.     <img src="h5course.jpg" alt="独行冰海、梦幻雪冰" title="HTML5学堂">
3. </div>

样式：

1. .wrap {
2.     width: 400px;
3.     height: 400px;
4.     background: #fcf;
5.     /*行高等于高度,垂直居中*/
6.     line-height: 400px;
7.     /*水平居中*/
8.     text-align: center;
9. }
10. .wrap img {
11.     /* 图片按道理需要设置display：block，在这边条件的限制，所以我们没有设置了 */
12.     /* display: block; */
13.     width: 200px;
14.     height: 200px;
15.     /*垂直居中*/
16.     vertical-align: middle;
17. }

效果：

优点：

结构简单，容易实现和理解

缺点：

在IE6浏览器不兼容此方法

那么如何解决在IE6不支持该方法呢，其实很简单，如下：

结构：

1. <div class="wrap">
2.     <img src="Koala.jpg" alt="" title="">
3.     <span></span>
4. </div>

样式：

1. .wrap {
2.     width: 400px;
3.     height: 400px;
4.     background: #fcf;
5.     /*行高等于高度,垂直居中*/
6.     line-height: 400px;
7.     /*水平居中*/
8.     text-align: center;
9. }
10. .wrap img {
11.     /* 图片按道理需要设置display：block，在这边条件的限制，所以我们没有设置了 */
12.     /* display: block; */
13.     width: 200px;
14.     height: 200px;
15.     /*垂直居中*/
16.     vertical-align: middle;
17. }
18. .wrap span {
19.     display: inline-block; 
20. }

注意：添加了span标签，并且设置display属性设置为inline-block来使我们span标签拥有"layout"，这样就解决了在IE6不能兼容的问题.

缺点：

无形中添加了空标签，所以不建议使用

第三种方法利用position和margin进行元素水平垂直居中

结构：

1. <div class="wrap">
2.     <div class="box">梦幻雪冰</div>
3. </div>

样式：

1. .wrap {
2.     position: relative;
3.     width: 400px;
4.     height: 400px;
5.     background: #fcf;
6. }
7. .box {
8.     position: absolute;
9.     left: 50%;
10.     top: 50%;
11.     width: 200px;
12.     height: 200px;
13.     margin: -100px 0 0 -100px;
14.     background: #999;
15. }

原理：

效果：

欢迎沟通交流~HTML5学堂

第四种方法利用position进行元素水平垂直居中

结构：

1. <div class="wrap">
2.     <div class="box">HTML5学堂</div>
3. </div>

样式：

1. .wrap {
2.     position: relative;
3.     width: 400px;
4.     height: 400px;
5.     background: #fcf;
6. }
7. .box {
8.     position: absolute;
9.     top: 0;
10.     bottom: 0;
11.     right: 0;
12.     left: 0;
13.     width: 200px;
14.     height: 200px;
15.     margin: auto;
16.     background: #999;
17. }

原理：

设置了绝对定位的话，CSS属性top、bottom、left、right都为0的话，这是不可能的，因为.box的元素有设置宽高，所以你只要在设置一个margin：auto，自然就居中了。

效果：

第五种方法利用display：table与table-cell进行元素水平垂直居中

结构：

1. <div class="wrap">
2.  <div class="box">
3.   <div class="con">梦幻雪冰</div>
4.  </div>
5. </div>

样式：

1. .wrap {
2.     /*让元素以表格形式渲染*/
3.     display: table;
4.     height: 400px;
5.     width: 400px;
6.     background: #fcf;
7. }
8. .box {
9.     /*让元素以表格的单元素格形式渲染*/
10.     display: table-cell;
11.     /*使用元素的垂直对齐*/
12.     vertical-align: middle;
13. }
14. .con {
15.     width: 200px;
16.     height: 200px;
17.     margin: 0 auto;
18.     background: #999;
19. }

效果：

优点：

这种方法不会像前面的两种方法一样，有高度的限制，此方法可以要据元素内容动态的改变高度，从而也就没有空间的限制，元素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。

缺点：

不足之处呢？这种方法只适合现代浏览器，在IE6-7下无法正常运行。

那么如何解决兼容IE6、IE7呢？

结构：

1. <div class="wrap">
2.  <div class="box">
3.   <div class="out">
4.    <div class="con">梦幻雪冰</div>
5.   </div>
6.  </div>
7. </div>

样式：

1. .wrap {
2.     position: relative;
3.     /*让元素以表格形式渲染*/
4.     display: table;
5.     height: 400px;
6.     width: 400px;
7.     background: #fcf;
8. }
9. .box {
10.     /*让元素以表格的单元素格形式渲染*/
11.     display: table-cell;
12.     /*使用元素的垂直对齐*/
13.     vertical-align: middle;
14.     /*利用hack技术*/
15.     *position: absolute;
16.     *top: 50%;
17.     *left: 50%;
18. }
19. .out {
20.     /*利用hack技术*/
21.     *position:relative;
22.     *top: -50%;
23.     *left: -50%;
24. }
25. .con {
26.     width: 200px;
27.     height: 200px;
28.     /*水平垂直居中*/
29.     margin: 0 auto;
30.     background: #999;
31. }

第六种方法利用display：table-cell进行元素水平垂直居中

结构：

1. <div class="wrap">
2.  <div class="box">
3.   梦幻雪冰
4.  </div>
5. </div>

样式：

1. .wrap {
2.     display: table-cell;
3.     width: 400px;
4.     height: 400px;
5.     background: #fcf;
6.     vertical-align: middle;
7. }
8. .box {
9.     width: 200px;
10.     height: 200px;
11.     margin: 0 auto;
12.     background: #999;
13. }

效果：

优点：

这种方法的优点和方法三是一样的，不会有高度的限制。

缺点：

IE6、IE7不支持

第七种方法元素(空标签)水平垂直居中

结构：

1. <div class="floater"></div>
2. <div class="box">
3.  独行冰海、梦幻雪冰
4. </div>

样式：

1. html,
2. body {
3.     height: 100%;
4. }
5. .box {
6.     position: relative;
7.     /*清除浮动*/
8.     clear:both;
9.     height: 300px;
10.     width: 300px;
11.     margin: 0 auto;
12.     background: #999;
13. }
14. .floater {
15.     float:left;
16.     /*相对于父元素高度的50%*/
17.     height:50%;
18.     /*居中元素高度的一半*/
19.     margin-bottom: -150px;
20.     background: #fcf;
21. }

效果

相关文章推荐

CSS实现元素水平垂直居中 - 网易方法

CSS实现元素水平垂直居中 - 其他方法

CSS实现元素水平垂直居中 - CSS3 calc方法

欢迎沟通交流~HTML5学堂