美文网首页
HTML5开发-div的水平居中和上下居中

HTML5开发-div的水平居中和上下居中

作者: 我喜欢下雨天 | 来源:发表于2016-12-06 16:08 被阅读0次

水平居中

1.  当div块的position为absolute时,只能通过先设置left为50%,然后设置div的margin-left为div宽度一半的负数,这样就能居中了。

2. 当div块的position为static时,只能通过设置margin-left和margin-right为auto来居中。

3. 当div块的postion为relative时,可以通过前两种方法都可以实现。

垂直居中

目前所知,只能通过设置top为50%,然后设置div的margin-top为div高度的一半的负数的方式。

相关文章

  • HTML5开发-div的水平居中和上下居中

    水平居中 1. 当div块的position为absolute时,只能通过先设置left为50%,然后设置div的...

  • 水平居中与垂直居中

    水平居中和垂直居中可以说是在开发中经常遇到的问题,网上搜索水平居中和垂直居中的方法有很多,有的方法并不是很好,所以...

  • html+css,让div水平垂直居中的几种方式

    在web前端开发中经常需要使用到让div进行水平和垂直居中的技术,现在我们就来谈谈如何实现div水平垂直居中(如下...

  • 布局

    布局主要分为布局和居中,布局一般指的是多个div的左右布局或者左中右布局。居中就是水平居中和垂直居中 布局 只要记...

  • 网页布局实现之div垂直居中

    1.实现一个div上下左右居中的几种方式。 实现div水平居中很容易,给div一个宽度值,然后左右margin值为...

  • css水平居中和水平垂直居中

    水平居中和水平垂直居中demo

  • 居中布局

    1、水平居中(宽度未知) 例:有两个div,大的div包裹着小的div,如何使小的div水平居中在大的div中? ...

  • 常用的居中方法

    本文将介绍的居中方法有 ,水平居中,垂直居中和水平垂直居中。 一水平居中 二水平垂直居中

  • CSS水平垂直居中总结

    CSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: 单行文字的垂直居中: 让有宽度的div水平居中:...

  • 居中的那些事

    在前端开发过程中,我们不可避免的会遇到一些水平居中和垂直居中的问题,现就居中问题做以下总结。 a:水平居中 1,宽...

网友评论

      本文标题:HTML5开发-div的水平居中和上下居中

      本文链接:https://www.haomeiwen.com/subject/jssrmttx.html