How to use Flexbox to achieve centering effect in CSS

不言
Release: 2018-06-21 15:24:30
Original
2846 people have browsed it

This article mainly introduces examples of Flexbox in CSS to achieve the centering effect. 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. A design that solves 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.
2015715165959729.jpg (606×399)

.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;   
}
Copy after login

Advantages:

The content can be any height or width, and it will perform well even if it overflows
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
May have potential performance issues

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use CSS3 to create a colored progress bar style

Analysis on CSS3 positioning and floating

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

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template