How to make a child element is centered horizontally and vertically in the parent container? This issue compulsory in combat development, but also the application very much.
How to make an inline elements (text, images, etc.) horizontal and vertical centering
Inline elements centered horizontally
A parent container is provided:
text-align: center;
Inline elements vertically centered
Let the text line height equal to the height of the box , allowing single-line text centered vertically . such as:
.father {
height: 20px;
line-height: 20px;
}
How to make a block element vertically centered horizontally
margin: auto problems
In CSS horizontal centering of the elements is very simple: if it is a line element to its parent container application text-align: center; if it is a block-level element, on its own application margin: autoor margin: 0 auto.
Here, margin: autothe equivalent margin: auto auto auto auto. margin: 0 autoEquivalent margin: 0 auto 0 auto, on the lower right four values correspond to the left. The calculated value depending on the remaining space .
However, if you want to center a vertical element, margin: autoit will not work .
For example, the following code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father{ height: 500px; background: pink; } .his { width: 300px; height: 200px; background: red; margin: auto; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> <script></script> </body> </html>
The above code, the parent and child elements are given width and height , even in this case, I element to the sub-set margin: auto, still no child elements vertically.
That there is no better common practice?
One way: absolute positioning + margin (need to specify the width and height of the child element, not recommended)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .father{ position: relative; min-height: 500px; background: pink; } .son { position: absolute; width: 200px; height: 100px; background: red; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; } </style> </head> <body> <div class="father"> <div class="son">子元素的内容</div> </div> <script></script> </body> </html>
Code explanation : We let the top left sub-element center, and then moves upward half of the width (50px), to achieve the effect of vertically centered; horizontally centered similar principle.
Shortcomings : the requirements specified width and height of the child elements, in order to write margin-top and margin-left property values .
However, under normal circumstances, the elements that need centered, its width and height is often determined by its content, not recommended for fixed width and height.
Second way: absolute positioning + translate (without specifying the width and height of the child element, recommended)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .father{ position: relative; min-height: 500px; background: pink; } .son { position: absolute; background: red; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="father"> <div class="son">子元素的内容</div> </div> <script></script> </body> </html>
The wording, without specifying the width and height of the sub-element case, let it vertically centered in the parent vessel . Because the translate function using a percentage value, based on the element itself and in terms of width and height movement () of the reference (dynamic calculation width and height ).
Mode 3: flex arrangement (to be improved)
The parent container to Flex layout, to give the parent container add attributes justify-content: center, in this case, the sub-elements can be centered horizontally; add properties to give the parent vessel align-items: center, in this case, the sub-elements can be vertically centered .
Code Example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .father{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: pink; } .son { background: red; } </style> </head> <body> <div class="father"> <div class="son">子元素的内容</div> </div> <script></script> </body> </html>
The wording of the above, shortcomings that: set a property to the parent container justify-content: centerand align-items: centerafter, leading to the parent containers of all child elements are all centered vertically up (if more than one child in the parent container element of words). I obviously want a child element specifies the center, how to improve it?
Mode 4: flex layout + margin: auto (recommended)
We just need to write two lines declare: Give the parent container settings display: flex , give us the specified child element is set too familiar margin: auto , you can let the child element specified in the remaining space , the horizontal and vertical center . It's done.
Code Example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .father{ the display : Flex ; min-height : 100vh ; background : Pink ; } .son { margin : Auto ; background : Red ; } </ style > </ head > < body > < div class = "Father" > < div class = "son" > content sub-elements, like horizontal and vertical centering </ div > < Div class = "son2" > The horizontal and vertical centering element Prefer </ div > </ div > < Script > </ Script > </ body > </ HTML >
Please note that when we use the Flex layout to the parent container, the child element margin: autonot only make it centered in the horizontal direction, vertical direction is centered.