Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中的簡(jiǎn)單實(shí)例

2024-07-11 08:32:36

字體：大中小

供稿：網(wǎng)友

Flexbox實(shí)現(xiàn)一個(gè)div元素在body頁面中水平垂直居中：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html> <html lang="en">
<head> <meta charset="utf-8"/>
<title>Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中</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 */
} /*實(shí)現(xiàn)文本垂直居中*/
.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布局實(shí)現(xiàn)水平垂直居中</div>
</body> </html>