CSS3实现水平垂直居中

  • A+
所属分类:DIV+CSS

       水平垂直居中的制作大家都有碰到过,水平居中方法好处理,但是垂直居中的话还是让很多人头痛过,我也碰到很多盆友来询问如何让元素水平垂直居中。前面也专门讨论过如何让图片,单行文本和多行文本实现各种浏览器的水平垂直居中的方案。

       这次在iPhone项目中实现弹出窗口水平垂直居中,总不是很理想,后来采用了一种纯CSS3的实box方法实现水平垂直居中,现将实现的代码片段贴出与大家分享:

       HTML Markup

    <div class="center">
      <img src="http://www.w3cplus.com/sites/default/files/source/webdesign.jpg" alt="CSS3实现水平垂直居中" alt="" />
    </div>
    <div class="center">
      <div class="text">我就一行文字</div>
    </div>
    <div class="center">
      <div class="text">
        我是多行文字<br />
        我是多行文字
      </div>
    </div>

复制代码
       CSS Code

    .center {
      width: 300px;
      height: 200px;
      padding: 10px;
      border: 1px solid #ccc;
      margin: 20px auto;
      display: -webkit-box;
      -webkit-box-orient: horizontal;
      -webkit-box-pack: center;
      -webkit-box-align: center;
      display: -moz-box;
      -moz-box-orient: horizontal;
      -moz-box-pack: center;
      -moz-box-align: center;
      display: -o-box;
      -o-box-orient: horizontal;
      -o-box-pack: center;
      -o-box-align: center;
      display: -ms-box;
      -ms-box-orient: horizontal;
      -ms-box-pack: center;
      -ms-box-align: center;
      display: box;
      box-orient: horizontal;
      box-pack: center;
      box-align: center;
    }
    .center img,
    .text {
      border: 1px solid #dedede;
      padding: 2px;
    }

复制代码
       效果:

       实现水平垂直居中的关键代码:

    display: -webkit-box;
      -webkit-box-orient: horizontal;
      -webkit-box-pack: center;
      -webkit-box-align: center;
      display: -moz-box;
      -moz-box-orient: horizontal;
      -moz-box-pack: center;
      -moz-box-align: center;
      display: -o-box;
      -o-box-orient: horizontal;
      -o-box-pack: center;
      -o-box-align: center;
      display: -ms-box;
      -ms-box-orient: horizontal;
      -ms-box-pack: center;
      -ms-box-align: center;
      display: box;
      box-orient: horizontal;
      box-pack: center;
      box-align: center;

复制代码
       由于flexbox是CSS3的一个新属性,目前支持的浏览器仅:IE10+, Firefox 2+, Chrome 4+, Safari 3.1+。

  • 我的微信小程序
  • 长按二维码识别查看微信小程序
  • weinxin
  • 我的个人微信号
  • 长按识别加我个人微信号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: