CSS样式 vertical-align:middle 垂直居中生效情况

vertical-align:middle 是依赖div内子元素最高的行高来实现对某元素居中的

-------不存在浮动时可以直接生效垂直居中

HTML

.box1{

    display: table-cell;

    vertical-align: middle;

    text-align: center;

}

CSS

<div class="box box1">

        <span>垂直居中</span>

</div>

-----如果存在浮动不生效情况需要通过元素占位的方法居中可以通过：after 或者直接新建元素 (可能是定位影响子元素默认最高的行高)

.box1{

   float:left;

}

.box1:after{

  content:'';

  width:0;

  height:100%;

  display:inline-block;

  vertical-align:middle;

}

其他垂直居中方式浏览器兼容性不能兼容较低版本很多是HTML5样式

display:flex

.box1{

    display: flex;

    justify-content:center;

    align-items:Center;

}

　　　绝对定位和负边距

.box1{position:relative;}

.box1 span{

            position: absolute;

            width:100px;

            height: 50px;

            top:50%;

            left:50%;

            margin-left:-50px;

            margin-top:-25px;

            text-align: center;

        }

　　绝对定位和0

.box1 span{

  width: 50%;

  height: 50%;

  background: #000;

  overflow: auto;

  margin: auto;

  position: absolute;

  top: 0; left: 0; bottom: 0; right: 0;

}

　　translate

.box1 span{

            position: absolute;

            top:50%;

            left:50%;

            width:100%;

            transform:translate(-50%,-50%);

            text-align: center;

        }

　　display:flex和margin:auto

.box1{

    display: flex;

    text-align: center;

}

.box1 span{margin: auto;}

　display:-webkit-box

.box1{

    display: -webkit-box;

    -webkit-box-pack:center;

    -webkit-box-align:center;

    -webkit-box-orient: vertical;

    text-align: center

}

　display:-webkit-box

<div class="floater"></div>

<div class="content"> Content here </div>

.floater {

    float:left;

    height:50%;

    margin-bottom:-120px;

}

.content {

    clear:both;

    height:240px;

    position:relative;

}

原文出处：http://www.cnblogs.com/hutuzhu/p/4450850.html

巴特西

CSS样式 vertical-align:middle 垂直居中生效情况

最新文章

热门文章