Home > Article > Web Front-end > Flexbox creates CSS layout to achieve horizontal and vertical centering example analysis

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

高洛峰Original: 2017-03-07 11:53:541290browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief introduction to the usage of vertical-align and line-height in CSSNext article：A brief introduction to the usage of vertical-align and line-height in CSS

See more

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

Related articles