Share examples of using Flexbox to achieve centering effects in CSS

This article shares examples of using Flexbox to achieve centering effects in CSS. Pay attention to the compatibility issues in IE browsers. Friends in need can refer to it

The future development direction of CSS is to use Flexbox. Designed to solve common problems like vertical centering. Please note that Flexbox has more than one way to center. It can also be used to divide columns and solve weird layout problems.

.Center-Container.is-Flexbox {   
  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;   
  -webkit-box-pack: center;   
     -moz-box-pack: center;   
     -ms-flex-pack: center;   
  -webkit-justify-content: center;   
          justify-content: center;   
}

Benefits:

The content can be any height and width, and it will perform well overflow
Can be used for various advanced layout techniques

Also note: IE8-9 is not supported

Need to write styles on the body, or require additional containers
Need various manufacturer prefixes to be compatible with modern browsers
There may be potential Performance issues

The above is the detailed content of Share examples of using Flexbox to achieve centering effects in CSS. For more information, please follow other related articles on the PHP Chinese website!