本文摘自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怎么打印
Html如何设置必填项
Html制作简单而漂亮的登录页面
在Html中,如何用style添加属性
Html怎么设置按钮的大小
怎样设置网页以新窗口方式打开
如何用Html显示分割
Html段落的知识总结
Html的编辑方式
Html怎样把div放在底部
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html的元素水平垂直居中应该怎么设置