Flexbox制作CSS布局實現水平垂直居中的簡單實例

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> 關於CSS >> Flexbox制作CSS布局實現水平垂直居中的簡單實例

編輯：關於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>

以上這篇Flexbox制作CSS布局實現水平垂直居中的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/dearxinli/p/5674227.html

css關於position屬性的用法詳解(絕對定位和相對定位的混淆): 挺久沒用，有點忘了關於position這個屬性的用法，導致在練手的時候又犯了跟最開始新手才會犯的錯誤
利用CSS3把圖片變成灰色模式的實例代碼: 先來看看效果圖：實例代碼：復制代碼代碼如下:<!DOCTYPE html><htm
CSS基礎教程: CSS的屬性縮寫: 一些CSS屬性允許使用一串值代替許多屬性，值使用空格分開。　　margin,pdding和borde

小編推薦

DIV CSS 佈局教程網