用Flexbox制作CSS布局實現水平垂直居中

發布時間：2021-08-10 17:41:01 來源：億速云閱讀：157 作者：chen 欄目：web開發

本篇內容介紹了“用Flexbox制作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布局實現水平垂直居中”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！

向AI問一下細節

91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本