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