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

本文摘自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

阅读剩余部分

相关阅读 >>

Html label标签的作用是什么？Html label标签的用法方法详解

怎么设置Html的背景图片的位置

Html <fieldset> 标签的具体用法是什么？怎么用fieldset设置边框颜色？

Html代码在编写过程中的一定要注意的三点

Html中图片标签的用法介绍

Html背景的属性名是

Html a标签是怎么使用的？Html a标签的使用总结

页面中文本域的值怎么设置

post提交获得Html页面源码的实现代码