Flexbox实现一个div元素在body页面中水平垂直居中：
XML/HTML Code复制内容到剪贴板- >
- <html lang="en">
- <head>
- <meta charset="utf-8"/>
- <title>Flexbox制作CSS布局实现水平垂直居中title>
- <style type="text/css">
- html {
- height: 100%;
- }
- body {
- display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
- display: -moz-box; /* 老版本语法: Firefox (buggy) */
- display: -ms-flexbox; /* 混合版本语法: IE 10 */
- display: -webkit-flex; /* 新版本语法： Chrome 21+ */
- display: flex; /* 新版本语法： Opera 12.1, Firefox 22+ */
- /*垂直居中*/
- /*老版本语法*/
- -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% /* needed for Firefox */
- }
- /*实现文本垂直居中*/
- .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>
- <div class="box">Flexbox制作CSS布局实现水平垂直居中div>
- body>
- html>
以上这篇Flexbox制作CSS布局实现水平垂直居中的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持潘少俊衡。
原文地址：http://www.cnblogs.com/dearxinli/p/5674227.html
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
本文地址：/web/CSS/77629.html
