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

阅读剩余部分

相关阅读 >>

Html快速生成tab没用怎么办

Html的<body> 标签

什么软件可以编写Html代码

关于Html基本语法和语义写法规则与实例分析

Html怎么去掉a标签下划线

Html中如何调整图片之间的间距

Html中列表、表格和媒体元素的介绍

Html中<p>和<br>的区别是什么

Html切图是什么

Html中强制换行的标记是什么

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




打赏

取消

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

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

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

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

评论

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