HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 CSS3教程 查看内容

CSS3实现水平垂直居中

2012-7-17 15:04| 发布者: html5cn| 查看: 20585| 评论: 6|原作者: Airen|来自: W3CPlus

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

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

       HTML Markup

  1. <div class="center">
  2.   <img src="http://www.w3cplus.com/sites/default/files/source/webdesign.jpg" alt="" />
  3. </div>
  4. <div class="center">
  5.   <div class="text">我就一行文字</div>
  6. </div>
  7. <div class="center">
  8.   <div class="text">
  9.     我是多行文字<br />
  10.     我是多行文字
  11.   </div>
  12. </div>
复制代码

       CSS Code

  1. .center {
  2.   width: 300px;
  3.   height: 200px;
  4.   padding: 10px;
  5.   border: 1px solid #ccc;
  6.   margin: 20px auto;
  7.   display: -webkit-box;
  8.   -webkit-box-orient: horizontal;
  9.   -webkit-box-pack: center;
  10.   -webkit-box-align: center;
  11.   display: -moz-box;
  12.   -moz-box-orient: horizontal;
  13.   -moz-box-pack: center;
  14.   -moz-box-align: center;
  15.   display: -o-box;
  16.   -o-box-orient: horizontal;
  17.   -o-box-pack: center;
  18.   -o-box-align: center;
  19.   display: -ms-box;
  20.   -ms-box-orient: horizontal;
  21.   -ms-box-pack: center;
  22.   -ms-box-align: center;
  23.   display: box;
  24.   box-orient: horizontal;
  25.   box-pack: center;
  26.   box-align: center;
  27. }
  28. .center img,
  29. .text {
  30.   border: 1px solid #dedede;
  31.   padding: 2px;
  32. }
复制代码

       效果:

code-box.jpg



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

  1. display: -webkit-box;
  2.   -webkit-box-orient: horizontal;
  3.   -webkit-box-pack: center;
  4.   -webkit-box-align: center;
  5.   display: -moz-box;
  6.   -moz-box-orient: horizontal;
  7.   -moz-box-pack: center;
  8.   -moz-box-align: center;
  9.   display: -o-box;
  10.   -o-box-orient: horizontal;
  11.   -o-box-pack: center;
  12.   -o-box-align: center;
  13.   display: -ms-box;
  14.   -ms-box-orient: horizontal;
  15.   -ms-box-pack: center;
  16.   -ms-box-align: center;
  17.   display: box;
  18.   box-orient: horizontal;
  19.   box-pack: center;
  20.   box-align: center;
复制代码

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


更多
1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

相关阅读

发表评论

最新评论

引用 temp 2012-7-18 12:47
<IT职业交流> 83794229,任意交流,欢迎加入! 和谐交流,谢谢
引用 sbszdhn999 2012-7-18 13:46
哦!懂了。
610v.com
引用 niu 2012-8-10 11:16
看着有点难度哈,新手入门,搬走,谢啦!!!!
引用 Akira047 2012-8-14 09:11
破ie9现在都还不支持~~
引用 fguohun 2012-8-15 19:53
什么时候写法能统一一下
引用 maggie 2012-10-2 20:52
这样的垂直居中,不觉得代码有点多么?……不用css3也可以用更少量的代码实现垂直居中的问题呀

查看全部评论(6)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-20 19:55

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部