html的元素水平垂直居中应该怎么设置


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

阅读剩余部分

相关阅读 >>

Html5实现移动端下拉刷新(原理和代码)

Html怎么加空格

Html中相对路径和绝对路径的区别

Html hr是什么意思

js实现改变Html上文字颜色和内容的方法

Html small标签怎么用

Html实现像百度的首页效果一样的背景图(代码)

Html如何转pdf

动态生成的Html标签如何实现绑定事件

利用Html实现一个个人信息表的网页(代码实例)

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...