HTML5中垂直上下居中的解决方案


本文摘自PHP中文网,作者小云云,侵删。

在CSS中,则要吐槽一下,利用margin:0 auto;可以达到水平方向的居中,但是margin: auto 0则无法达到垂直方向的居中。本文主要介绍了详解HTML5中垂直上下居中的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

这里主要还是由于没有对父控件即控件本身进行正确的定位。直接看代码, 首先对父控件需要使用相对布局,之后对子控件需要使用绝对布局,并且利用top,和bottom属性,结合margin: auto 0;,则可以达到效果。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

.container-vertical {

      position: relative;

      width: 100%;

      height: 200px;

      background: deepskyblue;

      margin-bottom: 20px;

}

         

.container-vertical-item {

    position: absolute;

    width: 130px;

    height: 80px;

    text-align: center;

            background: yellow;

        line-height: 80px;

    top: 0;

    bottom: 0;

    margin: auto 0;

}

垂直方向上居中.png

水平垂直方向居中

有了5.2的经验,我们可以尝试设置子控件的left和right,top,bottom属性都为0,并且margin: auto;四个方向上都是自动外边距。则可以达到这样的效果。其中需要注意的子控件需要必须是display: block; 属性。

看代码


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

.container-horization-vertical {

    position: relative;

    width: 100%;

    height: 200px;

    background: deepskyblue;

    margin-bottom: 20px;

}

         

.container-horization-vertical-item {

    position: absolute;

    width: 150px;

    height: 80px;

    background: yellow;

    line-height: 80px;

    text-align: center;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    margin: auto;

}

小结: 这种方案在解决一些不算复杂的页面布局时还是很不错的,可以适配任何界面以及几乎所有的浏览器。但对于十分复杂的页面可能会需要其他的解决方案,但是从这个思路出发也可以得到启示。

相关推荐:

移动端HTML5中判断横屏竖屏的方法

深入理解html5中的position

html5中必须知道的十件事

以上就是HTML5中垂直上下居中的解决方案的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

iconfont图标引用的方法步骤(代码)

HTML5 canvas实现粒子时钟的示例代码

HTML5新特性之跨文档消息传输详解

h5同层video播放器接入实例分享

具体解析HTML5文件读取filereader及文件读取模块的封装

使用HTML5给按钮背景设计不同的动画的简单示例(图文)

使用HTML5的5大原因是什么

h5 video标签只能放声音不能放视频的解决办法

HTML5中web是什么?web存储中的元素有哪些?

HTML5怎么实现拖拽

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




打赏

取消

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

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

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

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

评论

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