How to center child elements in css3
This article mainly explains "how css3 sets sub-elements in the center". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the idea of Xiaobian slowly and deeply to study and learn "how css3 sets sub-elements in the center" together!
Methods: 1. Use the statement "parent element {display:flex}" to set the parent element to elastic layout;2. Use the statement "parent element {align-items:center}" to center the child element vertically;3. Use the statement "parent element {justify-content:center}" to center the child element horizontally.
Operating environment of this tutorial: Windows 10 system, CSS3 && HTML5 version, Dell G3 computer.
CSS3 How to Set Child Element Center
We can set the parent element to a flexible layout through the display:flex style to provide maximum flexibility for the parent element.
The align-items attribute defines how flex children are aligned along the lateral axis (vertical axis) of the current row of the flex container.
justify-content sets or retrieves the alignment of the elastic box elements in the major axis (horizontal axis) direction.
Examples are as follows:
Box perfectly centered .con { width: 300px; height: 300px; border: 1px solid red; margin: 100px auto; display: flex; justify-content: center; /* horizontally centered */ align-items: center; /* vertically centered */ } .box { width: 100px; height: 100px; background-color: pink; }
Output:
Thank you for reading, the above is the content of "how to set the child element in the center of css3". After studying this article, I believe everyone has a deeper understanding of how to set the child element in the center of css3. The specific use situation still needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!
