Rumah > Artikel > hujung hadapan web > Flexbox制作CSS布局实现水平垂直居中实例分析
Flexbox制作CSS布局实现水平垂直居中实例分析
- 高洛峰asal
- 2017-03-07 11:53:541308semak imbas
下面小编就为大家带来一篇Flexbox制作CSS布局实现水平垂直居中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Flexbox实现一个p元素在body页面中水平垂直居中：
<!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>
<p class="box">Flexbox制作CSS布局实现水平垂直居中</p>
</body>
</html>
以上这篇Flexbox制作CSS布局实现水平垂直居中的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。
更多Flexbox制作CSS布局实现水平垂直居中实例分析相关文章请关注PHP中文网！
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：浅谈css中vertical-align和line-height的用法介绍Artikel seterusnya：css3动画效果总结分析