• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS如何实现一个网页元素水平垂直都居中?

    CSS如何实现一个网页元素水平垂直都居中?

    作者: 分类:HTML5与CSS3.0 点击: 338 次
    wordpress CMS主题:ssmay主题

      在做网站时,有时,我们可能有这样的需求:希望一个网页元素在水平方向 和 垂直方向 上都是居中的,如:登录界面框、客服界面框... ... 这些元素可能大小未知,例如一些图片或者是一些未知大小的块元素。

      利用绝对定位可以将要居中的元素脱离文档流.
      position:absolute;
      width:120px; height:120px;
      left:0px; right:0px; top:0px; bottom:0px;
      margin:auto;
      图片要设置 高和宽。
      margin:auto会自动去计算子元素和父元素之间的边距,并设为居中。
      为什么还需要将元素设为绝对定位呢?
      这是因为margin:auto 默认只会计算左右边距。
      而上下如果设置为auto时默认是取0.也就是说,
       margin:auto 和 margin:0 auto 在一般情况下没有区别,不能实现垂直居中。
      但是有了绝对定位后,margin-top和margin-bottom 的值就不是0了,也是通过计算所得。
      但他的父元素要设成相对定位:  position: relative;


      QQ二维码

    文章作者:hero2018
    本文地址:http://wanlimm.com/77201807135904.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.