大可网

您现在的位置是:首页>文章详情

文章详情

CSS3如何实现水平垂直居中?

2022-06-23 381热度
摘要:水平垂直居中的制作大家都有碰到过,水平居中方法好处理,但是垂直居中的话还是让很多人头痛过,我也碰到很多盆友来询问如何让元素水平垂直居中。前面也专门讨论过如何让图片,单行文本和多行文本实现各种浏览器的水平垂直居中的方案。 前面在CSS制作图片水平垂直居中》和《CSS制作水平垂直居中对齐》两篇文章中和大家一起探讨过多种实现方法,以及兼容ie浏览器。这次在iPhone项目中实现弹出窗口水平垂直居中,总不是很理想,后来采用了一种纯CSS3的实...

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

前面在CSS制作图片水平垂直居中》和《CSS制作水平垂直居中对齐》两篇文章中和大家一起探讨过多种实现方法,以及兼容ie浏览器。这次在iPhone项目中实现弹出窗口水平垂直居中,总不是很理想,后来采用了一种纯CSS3的实box方法实现水平垂直居中,现将实现的代码片段贴出与大家分享:

HTML Markup

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


CSS Code


  1. .center{
  2. width:300px;
  3. height:200px;
  4. padding:10px;
  5. border:1pxsolid#ccc;
  6. margin:20pxauto;
  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. .centerimg,
  29. .text{
  30. border:1pxsolid#dedede;
  31. padding:2px;


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

  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;


相关文章

文章评论

暂无任何评论,请君畅言