html的元素水平垂直居中应该怎么设置-木庄网络博客

2022-02-06 17:42:06 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者php中世界最好的语言，侵删。

这次给大家带来html的元素水平垂直居中应该怎么设置，设置html的元素水平垂直居中的注意事项有哪些，下面就是实战案例，一起来看一下。

我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。

到现在为止，探讨了很多种方法。

HTML：

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

第一种： CSS绝对定位

主要利用绝对定位，再用margin调整到中间位置。

父元素：

.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);   
}

水平垂直居中对齐：

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

第二种： CSS绝对定位 + Javascript/JQuery

阅读剩余部分