Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how to achieve horizontal and vertical CSS center of the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you will learn something after reading this article, let's take a look at it.

First, I'll create a common template style.

Parent {margin: 0 auto; width: 300px; height: 300px; border: 1px solid red; box-sizing: border-box; .child {height: 100px; width: 100px; background: # 2f8df0;}}

Then the specific style used is written separately in the method. First, four usual layout techniques are introduced.

1. Center the div in the div horizontally and set the width of the child element.

.parent {width:300px; margin:0 auto;}

Note: if the child element has display:table-cell set, then margin:0 auto; will fail.

two。 Sets the vertical center of the text and sets the height that contains the text div.

.child {text-align:center line-height:100px / / know the height of the child element, set it to the same height as height}

3. Two or more block-level elements are vertically centered, and the parent element sets height and line-height to be equal.

The .parent {line-height: 300px; / / knows the height of the parent element and sets the same height as the height} .child1 {display: inline-block; vertical-align: middle; line-height: initial; / / initial keyword is used to set the CSS property to its default value. } .child2 {display: inline-block; vertical-align: middle; line-height: initial; / / initial keyword is used to set the CSS property to its default value. }

4. Fill the current entire container with an element and set the absolute

.parent {position: absolute;top: 0 th bottom: 0 th left: 0 x right: 0;}

OK, after the introduction, let's start to introduce how CSS can achieve horizontal and vertical centering.

1. You do not need to set the width and height of the child element, you need to set the height of the parent element. Use absolute + transform (recommended)

.parent {position: relative} .child {position: absolute; top:50%; left:50%; transform:translate (- 50% absolute; top:50%; left:50%; transform:translate)} / / Note: if you only need to center up and down, just keep top, and keep the left,translate setting translateY (- 50%) or translateX (- 50%) as long as you center left and right.

two。 There is no need to set the width and height of the child element, or to set the width and height of the parent element. Use flex layout (it is recommended that mobile devices use flex directly

The pc side depends on the need for compatibility. )

.parent {display:flex; align-items:center; justify-content:center;} .child {}

3. You do not need to set the width and height of the child element, you need to set the height of the parent element. Use lineheight.

Note: this method requires text-align to reset the text display to the desired effect in the child elements.

The .parent {line-height: 300px; / setting is the same as the height of the parent element text-align: center;} .child {display: inline-block; vertical-align: middle; line-height: initial; / / initial keyword is used to set the CSS property to its default value. Text-align: left; / / reset the text display to the desired effect}

4. You do not need to set the width and height of the child element, you need to set the height of the parent element. Use css-table (the margin:0 auto of this element will expire after use)

.parent {display: table-cell; vertical-align: middle; text-align: center;} .child {display: inline-block;}

5. Set the width and height of the child element and the height of the parent element. Use absolute + negative margin

.parent {position: relative} .child {position: absolute; top: 50%; left: 50%; margin-left:-50px; / / know the width and height of the child element margin-top:-50px; / / know the width and height of the child element}

6. Set the width and height of the child element and the height of the parent element. Use absolute + margin auto

.parent {position: relative} .child {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}

7. Set the width and height of the child element and the height of the parent element. Use absolute + calc (this method compatibility depends on calc compatibility)

.parent {position: relative} .child {position: absolute; top: calc (50%-50px); left: calc (50%-50px);}

8. Use writing-mode (complicated to use and not recommended)

/ / Common style at the top 123.parent {writing-mode: vertical-lr; / / change the direction of the text display text-align: center;}. Box-child {writing-mode: horizontal-tb; display: inline-block; text-align: center; width: 100%;} .child {text-align: left; / / resets the text display to the desired effect margin: 0 auto;}

9. There is no need to set the width and height of the child element, or to set the width and height of the parent element. Use grid layout (not recommended, currently not very compatible)

.parent {display: grid;} .child {align-self: center; justify-self: center;}

10. Use table layout (pure hash method, who still uses table layout these days, )

123.parent {text-align: center;} .child {display: inline-block;} above is all the content of the article "how to achieve horizontal and vertical alignment of CSS". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.