Flexbox制作CSS布局實現水平垂直居中實例分析

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

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；/* 老版本語法： Firefox (buggy) */display： -ms-flexbox；align-items： center。

推薦度：

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

導讀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；/* 老版本語法： Firefox (buggy) */display： -ms-flexbox；align-items： center。

下面小編就為大家帶來一篇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中文網！

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

Flexbox制作CSS布局實現水平垂直居中實例分析

推薦度：

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

標簽：布局實例 css

熱門焦點

Flexbox制作CSS布局實現水平垂直居中實例分析

Flexbox制作CSS布局實現水平垂直居中實例分析

Flexbox制作CSS布局實現水平垂直居中實例分析

最新推薦

猜你喜歡

熱門推薦