美文网首页
垂直居中(笔记)

垂直居中(笔记)

作者: strong9527 | 来源:发表于2016-09-05 22:58 被阅读7次

总结一下垂直居中的几种方法。

此博文借鉴了 此篇博文

1 使用绝对定位垂直居中

优点:是适应响应式,且不会添加多余DOM节点。
缺点:不支持IE8及更低版本浏览器


<body>
    <div class="center"></div>
</body>


body,html{
    margin:0;
    height:100%;
}
.center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    height:200px;
    width:200px;
    left:0;
    right:0;
    background:red;
}

绝对对位原理:元素在过度受限情况下,将margin设置为auto,浏览器会重算margin的值,过度受限指的是同时设置top/bottom与height或者left/right与width。

2.利用transform

优点:是适应响应式,且不会添加多余DOM节点。
缺点:只支持IE9及以上浏览器,低版本IE并不支持。


body,html{
    margin:0;
    height:100%;
}
.center{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    height:200px;
    width:200px;
    background:red;
}


此方法的关键就在于利用 transform:translate属性,特别要注意的一点就是此属性的百分比值是指的本元素宽和高的值,而不是父元素

3.利用负的margin来进行定位

优点:兼容性极好低版本IE均支持。
缺点:不支持响应式。


<!-- 在第一个方法的基础上稍加修改 -->

.center{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
    height:200px;
    width:200px;
    background:red;
}

其实此方法和第二个方法原理基本类似。

4利用表格属性

缺点:增加DOM元素,IE8以下不支持(IE8可以)
优点:很难说吧,虽然说有这么一种方法可以垂直居中,但我无法说服自己用这种方法-_-.....


<body>
    <div class="container"><div class="sss"><div class="center"></div></div></div>
</body>


body,html{
    margin:0;
    height:100%;
    width:100%;
}

.container{
    display:table;
    height:100%;
    text-align:center;
    width:100%;
}

.sss{
    display:table-cell;
    vertical-align:middle;

}
.center{
    width:200px;
    height:200px;
    background:red;
}

5弹性盒式布局

缺点:兼容性简直太差了要到IE11才支持!!,几乎可不用。。。。


<body>
    <div class="center"></div>
</body>


body,html{
    margin:0;
    height:100%;
    width:100%;
}
body{
    display:flex;
    -ms-align-items:center;
    -webkit-align-items:center;
        align-items:center;
    -ms-justify-content: center;
    -webkit-justify-content:center;
        justify-content: center;
}
.center{
    width:200px;
    height:200px;
    background:red;
}


相关文章

  • CSS居中布局方案

    水平居中 垂直居中 水平垂直居中

  • 垂直居中(笔记)

    总结一下垂直居中的几种方法。 此博文借鉴了 此篇博文 1 使用绝对定位垂直居中 优点:是适应响应式,且不会添加多余...

  • 元素居中的方式

    1 水平居中 2 垂直居中 3 水平垂直居中

  • 常用的居中方法

    本文将介绍的居中方法有 ,水平居中,垂直居中和水平垂直居中。 一水平居中 二水平垂直居中

  • 居中布局

    水平居中 垂直居中 垂直水平居中 已知元素的宽高的居中布局 定位居中布局 盒模型居中布局 图片的垂直水平居中(利用...

  • CSS水平垂直居中总结

    CSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: 单行文字的垂直居中: 让有宽度的div水平居中:...

  • 垂直居中

    文字的垂直居中 元素的垂直居中

  • CSS图片居中(水平居中和垂直居中)

    css图片水平居中 css图片垂直居中 css图片水平垂直居中

  • css实现水平垂直居中的几种方法

    笔记学习整理 css垂直水平居中分为: 定宽居中方法①absolute+负margin②absolute+marg...

  • 居中对齐

    行内元素居中[#hang]垂直居中[#hc]水平居中[#hs] 块级元素居中[#kuai]垂直居中[#kc]水平居...

网友评论

      本文标题:垂直居中(笔记)

      本文链接:https://www.haomeiwen.com/subject/utfdettx.html