本文摘自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 label标签的作用是什么?Html label标签的用法方法详解
怎么设置Html的背景图片的位置
Html <fieldset> 标签的具体用法是什么?怎么用fieldset设置边框颜色?
Html代码在编写过程中的一定要注意的三点
Html中图片标签的用法介绍
Html背景的属性名是
Html a标签是怎么使用的?Html a标签的使用总结
页面中文本域的值怎么设置
post提交获得Html页面源码的实现代码
Html如何插入图片
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html的元素水平垂直居中应该怎么设置