本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来html的元素水平垂直居中应该怎么设置,设置html的元素水平垂直居中的注意事项有哪些,下面就是实战案例,一起来看一下。我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示。
到现在为止,探讨了很多种方法。
HTML:
1 2 3 4 5 | < body >
< div class = "maxbox" >
< div class = "minbox align-center" ></ div >
</ div >
</ body >
|
第一种: CSS绝对定位
主要利用绝对定位,再用margin调整到中间位置。
父元素:
1 2 3 4 5 6 7 | .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);
}
|
子元素:
1 2 3 4 5 | .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);
}
|
水平垂直居中对齐:
1 2 3 4 5 6 7 | .align-center{
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /*width/-2*/
margin-top: -100px; /*height/-2*/
}
|
第二种: CSS绝对定位 + Javascript/JQuery
阅读剩余部分
相关阅读 >>
Html strike标签怎么用
怎么将Html与css分开
Html a标签怎么用
Html area图片热点如何使用
Html中head头结构应该如何使用
Html页面跳转及参数传递问题
Html中块级元素是什么
Html img标签的使用
你应该了解的一些Html优化技巧
Html如何使用失去焦点属性onblur
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html的元素水平垂直居中应该怎么设置