Reprinted from the Nameless station like JS
For example, a parent div (w:100%;h:400px) has a sub-div (w:100px;100px;). To center it up or down.
Method One (
varticle-align) concept
Use the Center property of the table cell.
Steps
- The parent div layer is configured with a Div, which is set to a TABLE element (display:table) with a width of 100%
- Parent div configured as table cell element (Display:table-cell)
- Parent Div Configuration Center Property (Vertical-align:middle) to center the Sub Div
- Sub Div is centered around the margin configuration (Margin-left:auto; Margin-right:auto)
Example
<style>*{margin: 0; padding: 0; box-sizing: Border-box;} . Table {display: Table; Width: 100%;} . Father {display: Table-cell; vertical-align: Middle;} . Son {margin: Auto;}</style><body> <divclass="Table" > <divclass="Father"style="width:100%; height:400px; border:1px solid rebeccapurple; "> <divclass="Son"style="width:100px; Height:100px;background:palegreen; "></div> </div> </div></body>
Note:
- Table cells are special, and if there is only one cell, its width defaults to 100% of the width of the parent (TABLE|TR);
- Table default width does not open and requires manual configuration
width:100%;
Method Two (
Line-height) concept
When the row of the parent Div is higher than its height, the inner inline elements are centered up and down. When the inline block does not have a fixed height, it is also centered up and down. The center of Text property allows text-align:center
inner inline elements or inline block elements to be centered right and left.
Steps
- The sub-Div is set to the inline block element (display:inline-block);
- Parent Div Set Row height (line-height) to center the child div up or down
- The parent Div sets the center of text (Text-align:center) around the child Div.
<style>*{margin: 0; padding: 0; box-sizing: Border-box;} . Father {line-height: 500px; text-align: Center; font-size: 0;} . Son { Display: Inline-block; / * DISPLAY:INLINE-FLEX;Display:inline-grid;display:inline-table; * * }</style><body> <divclass="Father"style="width:100%; height:400px; border:1px solid rebeccapurple; "> <divclass="Son"style="width:100px; Height:100px;background:palegreen; "></div> </div></body>
Note: Row height If set to the height of the current parent Div (400px), a child div with a fixed height will not be centered, and the problem is that the browser defaults to centering it as text, which is a piece of text (chrome default Font-size:16px;hight : 21px) is centered and does not center it as a height of 100px. Therefore, the parent Div needs to line-height
be adjusted. With font-size:0
the (corresponding font height of 0) as an example, you need line-height to increase the height of a sub-div (400px + 100px;).
Method Three (
positioning) concept
A pattern that leverages the percentage of positional properties (top, left, right, bottom). If 100%, the length of the offset is 100% of the height (width) of the parent Div.
Steps
- Parent DIV tag under positioning (position:relative|absolute|fixed); Sub div Absolute positioning (position:absolute)
- Sub Div is centered up
top:50%;margin-top:-h/2;
or down: or bottom:50%;margin-bottom:-h/2;
;
- Sub Div centered around:
left:50%;margin-left:-w/2
or right:50%;margin-right:-w/2
;
Example
<style>*{margin: 0; padding: 0; box-sizing: Border-box;} . Father {position: relative;} . Son {position: Absolute; bottom:50%; Margin-bottom: -50px; Left: 50%; Margin-left: -50px; }</style><body> <divclass="Father"style="width:100%; height:400px; border:1px solid rebeccapurple; "> <divclass="Son"style="width:100px; Height:100px;background:palegreen; "></div> </div></body>
Method Four (positioning) concept:
The Position property top and bottom (or left and right) values are set to 0, but the Sub div has a fixed height (width) and cannot reach the upper and lower (right) spacing of 0, at which point the Sub Div is set margin:auto to center the display.
Steps:
- Parent DIV tag under positioning (position:relative|absolute|fixed|sticky); Sub div Absolute positioning (position:absolute)
- Sub Div Center up and down:
top:0;bottom:0;margin-top:auto;margin-bottom:auto
- Sub Div centered around:
left:0;right:0;margin-left:auto;margin-right:auto
Example
<style>*{margin: 0; padding: 0; box-sizing: Border-box;} . Father {position: relative;} . Son {position: Absolute; Top: 0; Bottom:0; Left : 0; Right : 0; margin: Auto}</style><body> <divclass="Father"style="width:100%; HEIGHT:60RPX; border:1px solid rebeccapurple; "> <divclass="Son"style="width:100px; Height:100px;background:palegreen; "></div> </div></body>
Method Five (Flex) concept
Elastic box with a centering function
Example
<style>*{margin: 0; padding: 0; box-sizing: Border-box;} . Father {display:Flex; Align-items: Center} . Son {margin: Auto}</style><body> <divclass="Father"style="width:100%; height:400px; border:1px solid rebeccapurple; "> <divclass="Son"style="width:100px; Height:100px;background:palegreen; "></div> </div></body>
Flex compatibility, and known issues that exist
End
Method Two and method three compatibility are better than others
Resources
Can I Use
Css-vertical-center-solution
5 ways to vertically center CSS-front view
Using CSS to get div up and down the center of the way