网站首页 » 前端开发 » div+css » CSS 水平垂直居中方法大全
上一篇:
下一篇:

CSS 水平垂直居中方法大全

前言

居中一个极其常见的需要,你应该绝不会陌生,但下面将要说的方法可能会有你不知道的。

下面的方法统一的HTML代码如下:

<div class="demo-wrap">
    <div class="demo-center"></div>
</div>

position+auto

.demo-wrap{
    width: 300px;
    height: 300px;
    background: #eee;
    position: relative
}
.demo-center{
    width: 200px;
    height: 200px;
    background: #999;
    margin:auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

兼容性:IE8及以上支持

table-cell

.demo-wrap{
    width: 300px;
    height: 300px;
    background: #eee;
    display: table-cell; /*让 verticle-align 有效*/
    text-align: center;
    vertical-align: middle;
}
.demo-center{
    width: 200px;
    height: 200px;
    background: #999;
    display: inline-block;
    vertical-align: middle;
}

兼容性:IE8及以上支持

inline-block 浏览器支持情况

css-table 浏览器支持情况

这里除了给父父元素一个vertical-align: middle;之外,我们还需要给需要水平垂直居中的元素也添加vertical-align: middle;属性。如果不添加,那么在垂直方向上会有几个像素的误差,我也没明白这是为什么。

position+margin

形式一

.demo-wrap{
    width:300px;
    height:300px;
    background:#eee;
    position:relative
}
.demo-center{
    width:200px;
    height:200px;
    background:#999;
    position:absolute;
    top:50%;left:50%;
    margin-left:-100px;
    margin-top:-100px
}

这种方法兼容所有浏览器,包括IE5。只是这里有一个缺点,那就是需要垂直居中的元素有定义宽和高。这在PC端就没问题,但对于移动端来说可能就会让你有点尴尬。

形式二

.demo-wrap{
    width:300px;
    height:300px;
    background:#eee;
    position:relative
}
.demo-center{
    width:200px;
    height:200px;
    background:#999;
    position:absolute;
    top:50px;
    left:50px
}

原理跟上面的50%的方法差不多,只不过这种方法就可以让你少写些个属性,更直观。

形式三

这种方法比前面那两种方法更好使,只不过就得多添加一个元素来进行控制。

.demo-wrap{
    width:300px;
    height:300px;
    background:#eee;
    position:relative
}
.demo-center{
    background:#999;
    position:absolute;
    left:50%;top:50%
}
.center{
    background:#666;
    position:relative;
    margin-left:-50%;
    margin-top:-50%;
    float:left
}

position+transform

.demo-wrap{
    width:300px;
    height:300px;
    background:#eee;
    position:relative
}
.demo-center{
    width:200px;
    height:200px;
    background:#999;
    position:absolute;
    top:50%;left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%)
}

兼容性:IE9及以上

transforms 浏览器支持情况

这种方法跟上面两种方法的原理是一样的,只是这里用了CSS3的属性来实现。这种方暂时不建议在PC端用,在移动端你就大可放心使用。这种方法有什么好处呢?好外就在于,你不再需要给 margin-left 、margin-top 设置负值来抵消以让元素达到居中,也不需要像方法4那样写。

弹性盒子 Flex

纯 Flex

.demo-wrap{
    width:300px;
    height:300px;
    background:#eee;
    display:flex;
    align-items:center;
    justify-content:center
}
.demo-center{
    background:#999
}

兼容性:IE10及以上

canvas 浏览器支持情况

这里用到了CSS3中的一个属性,这个属性把IE鄙视得不要不要的,所以在用这个属性的时候就得根据自己的实际情况来了,这是一种相当理想的方法,你不需要给元素宽高,就可以实现水平垂直居中,移动端力荐此方法

flex+margin

.demo-wrap{
    width:300px;
    height:300px;
    background:#eee;
    display:flex
}
.demo-center{
    width:200px;
    height:200px;
    background:#999;
    margin:auto
}

兼容性:IE10及以上 ,这种方法跟第6种方法比较起来代码也更加简洁。

终极法

.demo-wrap{height: 200px;
    width: 200px;
    display: table;
    position: relative;
    background: #eee;
}
.demo-center{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
   *position: absolute;
   *top: 50%;
   *left: 50%;
}
.center{
    background: #ccc;
    display: inline-block;
   *position:relative;
   *top: -50%;
   *left: -50%;
 }

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/css-horizontal-verticle/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END