家乡的夜景，小小的月牙儿挂在湛蓝湛蓝的天空上，把淡淡的光洒在军舰上，军舰就像披上了一件银白色的棉袄，海面上波光粼粼，海浪轻轻地拍打着礁石，像一位母亲在抚摸着孩子的小脚丫。
Flexbox实现一个div元素在body页面中水平垂直居中：
XML/HTML Code复制内容到剪贴板
- <!DOCTYPEhtml>
- <htmllang="en">
- <head>
- <metacharset="utf-8"/>
- <title>Flexbox制作CSS布局实现水平垂直居中</title>
- <styletype="text/css">
- html{
- height:100%;
- }
- body{
- display:-webkit-box;/*老版本语法:Safari,iOS,Androidbrowser,olderWebKitbrowsers.*/
- display:-moz-box;/*老版本语法:Firefox(buggy)*/
- display:-ms-flexbox;/*混合版本语法:IE10*/
- display:-webkit-flex;/*新版本语法：Chrome21+*/
- display:flex;/*新版本语法：Opera12.1,Firefox22+*/
- /*垂直居中*/
- /*老版本语法*/
- -webkit-box-align:center;
- -moz-box-align:center;
- /*混合版本语法*/
- -ms-flex-align:center;
- /*新版本语法*/
- -webkit-align-items:center;
- align-items:center;
- /*水平居中*/
- /*老版本语法*/
- -webkit-box-pack:center;
- -moz-box-pack:center;
- /*混合版本语法*/
- -ms-flex-pack:center;
- /*新版本语法*/
- -webkit-justify-content:center;
- justify-content:center;
- margin:0;
- height:100%;
- width:100%/*neededforFirefox*/
- }
- /*实现文本垂直居中*/
- .box{
- display:-webkit-box;
- display:-moz-box;
- display:-ms-flexbox;
- display:-webkit-flex;
- display:flex;
- -webkit-box-align:center;
- -moz-box-align:center;
- -ms-flex-align:center;
- -webkit-align-items:center;
- align-items:center;
- width:500px;
- height:200px;
- background:red;
- color:#fff;
- font-weight:bold;
- font-size:30px;
- }
- </style>
- </head>
- <body>
- <divclass="box">Flexbox制作CSS布局实现水平垂直居中</div>
- </body>
- </html>
以上这篇Flexbox制作CSS布局实现水平垂直居中的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
原文地址：http://www.cnblogs.com/dearxinli/p/5674227.html
