Flexbox erstellt ein CSS-Layout, um eine horizontale und vertikale Zentrierungsbeispielanalyse zu erreichen-CSS-Tutorial-php.cn

Flexbox erstellt ein CSS-Layout, um eine horizontale und vertikale Zentrierungsbeispielanalyse zu erreichen

高洛峰

Freigeben： 2017-03-07 11:53:54

Original

1267 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!