Flexbox creates CSS layout to achieve horizontal and vertical centering example analysis-CSS Tutorial-php.cn

Flexbox creates CSS layout to achieve horizontal and vertical centering example analysis

高洛峰

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

Original

1307 people have browsed it

The following editor will bring you a simple example of using Flexbox to create a CSS layout to achieve horizontal and vertical centering. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.

Flexbox implements a p element to be horizontally and vertically centered in the body page:

<!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>

Copy after login

The above article uses Flexbox to create a CSS layout to achieve horizontal and vertical The simple example of centering is all the content shared by the editor. I hope it can give you a reference, and I also hope you will support the PHP Chinese website.

For more relevant articles on the analysis of examples of CSS layouts produced by Flexbox to achieve horizontal and vertical centering, please pay attention to the PHP Chinese website!