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

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

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html> <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>

学习交流

如何查找有故障的配件

热门图片

猜你喜欢的新闻

猜你喜欢的关注