This article to share the CSS in the use of Flexbox to achieve the center effect of the example, pay attention to the compatibility problem in IE browser, the need for friends can refer to the following
The future direction of CSS is to use the Flexbox design to solve common problems like vertical centering. Note that Flexbox has more than one way of centering, and he can also be used to sort the columns and solve the 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:
Content can be any high-width, overflow can also perform well
Can be used for various advanced layout techniques
Also note: Ie8-9 is not supported
Need to write style on body, or need extra container
Requires a variety of vendor prefixes compatible with modern browsers
There may be potential performance issues