How to use css to realize centring layout

This article is to share with you about how to use css to achieve central layout. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Central layout

The centering layout consists of a parent container and several child containers, and the child containers are arranged horizontally or vertically in the parent container and centered horizontally or vertically. The central layout is a very classic problem, which I believe everyone will often encounter.

This is the simplest and most efficient way to center on this. Students experience the forced combination of display:flex and margin:auto.

. center-layout {display: flex; width: 400px; height: 400px; background-color: # f66; div {margin: auto; width: 100px; height: 100px; background-color: # 66f;} Thank you for reading! This is the end of the article on "how to use css to achieve central layout". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!