当前位置:Gxlcms > html代码 > 探究HTML元素的水平垂直居中_html/css_WEB-ITnose

探究HTML元素的水平垂直居中_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:34人阅读

HTML:

    

父元素

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

水平垂直居中对齐:

.align-center{    display: flex;    display: -webkit-flex;       /*兼容问题*/    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模型,兼容Firefox、Opera 和 Chrome,IE全军覆没。也是不因width,height的改变而影响水平垂直居中的效果。


人气教程排行