当前位置:首页 > 网页设计 >HTML >

HTML元素的水平垂直居中总结

发布时间:2016-03-07 09:44:16 作者:佚名 阅读:(1833)

在做网页的时候,经常要把div居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。
到现在为止,探讨了很多种方法。


HTML:

<body>
    <div class="maxbox">
        <div class="minbox align-center"></div>
    </div>
</body>

父元素

.maxbox{
    position: relative;
    width: 500px;
    height: 500px;
    margin: 5px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}

子元素:

.minbox{
    width: 200px;
    height: 200px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}

效果图(下面几种方法效果图一样):

第一种: CSS绝对定位
主要利用绝对定位,再用margin设置为auto
水平垂直居中对齐:

.align-center{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

第二种: CSS绝对定位
主要利用绝对定位,再用margin调整到中间位置。

水平垂直居中对齐:

.align-center{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;   /*width/-2*/
    margin-top: -100px;    /*height/-2*/
}

第三种: CSS绝对定位 + Javascript/JQuery
主要利用绝对定位,再用Javascript/JQuery调整到中间位置。相比第一种方法,此方法提高了class的灵活性。

水平垂直居中对齐:

.align-center{
    position: absolute;
    left: 50%;
    top: 50%;
}

JQuery:

$(function(){
    $(".align-center").css(
        {
            "margin-left": ($(".align-center").width()/-2),
            "margin-top": ($(".align-center").height()/-2)
        }
    );
});

第四种: CSS3绝对定位 + 位移
使用绝对定位与CSS3的 transform: translate同样也可以达到效果。

水平垂直居中对齐:

.align-center{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);  /*向左向上位移*/
}

第五种: Flexbox: [伸缩布局盒模型]
要让元素水平垂直,对于Flexbox模型来说太容易了。

这里得改变一下HTML:

<div class="maxbox align-center">
    <div class="minbox"></div>
</div>

水平垂直居中对齐:

.align-center{
    display: flex;
    display: -webkit-flex;       /*兼容问题*/
    display: -ms-flexbox; 
    justify-content: center;
    align-items: center; 
}

几种方法的比较:

  • 第一种:使用CSS绝对定位margin设置为auto,兼容性很好,应该是一种最好的方法了。
  • 第二种:使用CSS绝对定位margin调整,兼容性很好但是欠缺灵活性。如果有很多box里需要水平垂直居中,因其width,height不同而需要写不同的 .align-center 。
  • 第三种:使用脚本语言,兼容性很好且弥补了第一种的缺点。不因width,height的改变而影响水平垂直居中的效果。
  • 第四种:使用CSS3的一些新的属性,兼容IE10, Chrome, Firefox, 和 Opera。兼容性不太很好,不因width,height的改变而影响水平垂直居中的效果。
  • 第五种:使用Flexbox模型,在Chrom25.0+、Opera12.1,Firefox22+、IE11+都得到了支持,也是不因width,height的改变而影响水平垂直居中的效果。

欢迎分享转载→ HTML元素的水平垂直居中总结

© 2015-2019 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们