CSS3实现水平垂直居中

浏览数：50 / 时间：2015年06月09日

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

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

       HTML Markup

  1. <div class="center">
  2.   <img src="http://www.w3cplus.com/sites/default/files/source/webdesign.jpg" />
  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. }
复制代码

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： des class 代码 src html com 方法 http si des class 代码 src html com 方法 http si

相关文章

随机文章

您可能还喜欢

您可能还喜欢