HTML5学堂-码匠 HTML5学堂

您当前位于:HTML+CSS结构样式 ——> CSS如何实现元素水平垂直居中 - 水平垂直居中对齐方法集锦

CSS如何实现元素水平垂直居中 - 水平垂直居中对齐方法集锦

2015/07/28 16:42:02 | 作者:HTML5学堂(码匠) | 分类:HTML+CSS结构样式 | 关键词:CSS,水平,垂直,居中,方法

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. }

原理:

利用position和margin进行元素水平垂直居中原理

效果:

利用position和margin进行元素水平垂直居中

欢迎沟通交流~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,自然就居中了。

效果:

利用position进行元素水平垂直居中

第五种方法利用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. }

效果:

利用display:table与table-cell进行元素水平垂直居中

优点:

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

缺点:

不足之处呢?这种方法只适合现代浏览器,在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. }

效果:

利用display:table-cell进行元素水平垂直居中

优点:

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

缺点:

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学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端