Flexbox制作CSS布局實現(xiàn)水平垂直居中實例分析

來源：懂視網(wǎng) 責編：小OO 時間：2020-11-27 18:52:54

Flexbox制作CSS布局實現(xiàn)水平垂直居中實例分析

Flexbox實現(xiàn)一個p元素在body頁面中水平垂直居中。<；<。DOCTYPE html>；<；html lang="；en"；>；<；head>；<；meta charset="；utf-8"；/>；<；title>；Flexbox制作CSS布局實現(xiàn)水平垂直居中<；/title>；<；style type="；text/css"；>；html {height： 100%；}body {display： -webkit-box；/* 老版本語法： Firefox (buggy) */display： -ms-flexbox；align-items： center。

推薦度：

點擊下載本文 文檔為doc格式

導讀Flexbox實現(xiàn)一個p元素在body頁面中水平垂直居中。<；<。DOCTYPE html>；<；html lang="；en"；>；<；head>；<；meta charset="；utf-8"；/>；<；title>；Flexbox制作CSS布局實現(xiàn)水平垂直居中<；/title>；<；style type="；text/css"；>；html {height： 100%；}body {display： -webkit-box；/* 老版本語法： Firefox (buggy) */display： -ms-flexbox；align-items： center。

下面小編就為大家?guī)硪黄狥lexbox制作CSS布局實現(xiàn)水平垂直居中的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

Flexbox實現(xiàn)一個p元素在body頁面中水平垂直居中：

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

以上這篇Flexbox制作CSS布局實現(xiàn)水平垂直居中的簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持PHP中文網(wǎng)。

更多Flexbox制作CSS布局實現(xiàn)水平垂直居中實例分析相關(guān)文章請關(guān)注PHP中文網(wǎng)！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com