Heim >Web-Frontend >CSS-Tutorial >Flexbox erstellt ein CSS-Layout, um eine horizontale und vertikale Zentrierungsbeispielanalyse zu erreichen
Flexbox erstellt ein CSS-Layout, um eine horizontale und vertikale Zentrierungsbeispielanalyse zu erreichen
- 高洛峰Original
- 2017-03-07 11:53:541337Durchsuche
Der folgende Editor zeigt Ihnen ein einfaches Beispiel für die Verwendung von Flexbox zum Erstellen eines CSS-Layouts, um eine horizontale und vertikale Zentrierung zu erreichen. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Editor und werfen wir einen Blick darauf.
Flexbox implementiert ein p-Element, um es horizontal und vertikal auf der Hauptseite zu zentrieren:
<!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>
Der obige Artikel befasst sich mit Die von Flexbox erstellte CSS-Layout-Implementierung ist ein einfaches Beispiel für die horizontale und vertikale Zentrierung. Ich hoffe, dass es Ihnen eine Referenz geben kann, und ich hoffe, dass Sie die chinesische PHP-Website unterstützen.
Weitere relevante Artikel zur Analyse von Beispielen für horizontale und vertikale Zentrierung mithilfe des von Flexbox erstellten CSS-Layouts finden Sie auf der chinesischen PHP-Website!