搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

Flexbox制作CSS布局如何实现水平垂直居中的简单实例

发布时间：2023-01-02 18:53:48 来源：互联网
.
家乡的夜景，小小的月牙儿挂在湛蓝湛蓝的天空上，把淡淡的光洒在军舰上，军舰就像披上了一件银白色的棉袄，海面上波光粼粼，海浪轻轻地拍打着礁石，像一位母亲在抚摸着孩子的小脚丫。

Flexbox实现一个div元素在body页面中水平垂直居中：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="utf-8"/>
  5. <title>Flexbox制作CSS布局实现水平垂直居中</title>
  6. <styletype="text/css">
  7. html{
  8. height:100%;
  9. }
  11. body{
  12. display:-webkit-box;/*老版本语法:Safari,iOS,Androidbrowser,olderWebKitbrowsers.*/
  13. display:-moz-box;/*老版本语法:Firefox(buggy)*/
  14. display:-ms-flexbox;/*混合版本语法:IE10*/
  15. display:-webkit-flex;/*新版本语法：Chrome21+*/
  16. display:flex;/*新版本语法：Opera12.1,Firefox22+*/
  18. /*垂直居中*/
  19. /*老版本语法*/
  20. -webkit-box-align:center;
  21. -moz-box-align:center;
  22. /*混合版本语法*/
  23. -ms-flex-align:center;
  24. /*新版本语法*/
  25. -webkit-align-items:center;
  26. align-items:center;
  28. /*水平居中*/
  29. /*老版本语法*/
  30. -webkit-box-pack:center;
  31. -moz-box-pack:center;
  32. /*混合版本语法*/
  33. -ms-flex-pack:center;
  34. /*新版本语法*/
  35. -webkit-justify-content:center;
  36. justify-content:center;
  38. margin:0;
  39. height:100%;
  40. width:100%/*neededforFirefox*/
  41. }
  42. /*实现文本垂直居中*/
  43. .box{
  44. display:-webkit-box;
  45. display:-moz-box;
  46. display:-ms-flexbox;
  47. display:-webkit-flex;
  48. display:flex;
  49. -webkit-box-align:center;
  50. -moz-box-align:center;
  51. -ms-flex-align:center;
  52. -webkit-align-items:center;
  53. align-items:center;
  54. width:500px;
  55. height:200px;
  56. background:red;
  57. color:#fff;
  58. font-weight:bold;
  59. font-size:30px;
  60. }
  61. </style>
  62. </head>
  63. <body>
  64. <divclass="box">Flexbox制作CSS布局实现水平垂直居中</div>
  65. </body>
  66. </html>

以上这篇Flexbox制作CSS布局实现水平垂直居中的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/dearxinli/p/5674227.html

以下您可能有感兴趣的文章:
标签： Flexbox
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图