css common positioning and centering scheme_css positioning centering

Table of contents

1. Location classification

1. Static positioning

2. Relative positioning

Features:

3. Absolute positioning

Features:

4. Fixed positioning (old IE does not support)

Features:

5. Sticky positioning

Features:

Why Sticky Positioning Doesn't Work

6. Inheritance positioning

2. Centered

1. Center layout of inline elements

Centering horizontally:

vertical center

Knowledge expansion:

Centered horizontally and vertically

2. Centered layout of block-level elements

Centering horizontally:

Center vertically:

Center horizontally and vertically:

Method 1: Absolute positioning + -margin

Method 2: absolute positioning + margin: auto

Method 3: positioning + transform

Method 4: flex layout (recommended)

Method five: grid grid layout (recommended)

---

1. Location classification

1. Static positioning

position:static;（默认，具备标准流条件）

2. Relative positioning

position:relative;

Set the Y-axis position by top or bottom

Set the X axis position by left or right

Features:

1. Relative positioning doesn't break out of document flow
2. relative to its original position

3. Absolute positioning

position:absolute;

Set the Y-axis position by top or bottom

Set the X axis position by left or right

Features:

1. Absolutely positioned elements break out of the document flow
2. Position relative to the document if the parent is not positioned
3. If the parent (ancestor) has positioning, it is positioned relative to the parent (ancestor)
4. If there is padding, it will be positioned relative to the position of the paddingbox

4. Fixed positioning (old IE does not support)

position:fixed;

Set the Y-axis position by top or bottom

Set the X axis position by left or right

Features:

1. will break out of the document flow
2. Position relative to the visible window
3. Advertisements that move along the bars on both sides of the webpage can be used for reference

5. Sticky positioning

position: sticky;

The positioning base point is the window

Set the Y-axis position by top or bottom

Set the X axis position by left or right

Features:

1. Move elements using the browser's viewable window as a reference point (fixed positioning feature)
2. Sticky positioning occupies the original position (relative positioning feature)
3. One of top, left, right, and bottom must be added to be valid

Why Sticky Positioning Doesn't Work

• Parent elements cannot overflow:hidden or overflow:auto attributes.
• One of the 4 values ​​of top, bottom, left, and right must be specified, otherwise it will only be in relative positioning
• The height of the parent element cannot be lower than the height of the sticky element
• sticky elements only take effect within their parent elements

6. Inheritance positioning

position: inherit;

Inherit the value of the position attribute from the parent element.

2. Centered

1. Center layout of inline elements

Centering horizontally:

//方法一 
text-align:center; 
 
//方法二 
dispaly:flex; 
justify-content:center;

vertical center

single line text

//方法一
height === line-height;
 
//方法二
display: flex;
align-items: center;

multiline text

display: table-cell; 
vertical-align: middle;

Knowledge expansion:

If there is a picture that needs to be vertically centered with the text, you will find that the picture will always be a little higher, and the vertical centering cannot be done because there are three pixels below the picture. Just set vertical-align:middle for the picture.

vertical-align:middle;

Centered horizontally and vertically

display: flex; 
justify-content: center; /* 水平居中 */ 
align-items: center; /* 垂直居中 */

2. Centered layout of block-level elements

Centering horizontally:

//方法一 
定宽：margin： 0 auto; 
 
//方法二 
dispaly:flax; 
justify-content:center; 
 
//方法三 
position: absolute
left：50%
margin：负自身宽度一半

Center vertically:

//方法一 
display: flex;
align-items: center; 
 
//方法二 
position: absolute;
top: 50%;
margin-top：负本身高度一半 
 
//方法三 
position: absolute;
top: 50%;
transform: translateY(-50%); 
 
//方法四 
position: relative;
top: 50%;
transform: translateY(-50%);

Center horizontally and vertically:

Method 1: Absolute positioning + -margin

After positioning, set top and left to 50% respectively. At this time, the distance from the top margin of the element to the top margin of the parent element and the bottom margin of the child element is the same, and the distance from the left margin of the element to the left margin and right margin of the parent element The same is true, so subtract half of the height and half of the width of the element margin itself, and then the element can achieve the effect of vertical centering.

position: absolute; 
top: 50%; 
left: 50%; 
margin-left: —宽度一半;（负） 
margin-top: —高度一半;（负）

Method 2: absolute positioning + margin: auto

After positioning, use the auto attribute of the margin to make the margin automatically fill the entire parent element, so that the content can be centered

position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
margin: auto;

Method 3: positioning + transform

Use transform: translate to move the element, which is similar to the first method. The first method is to set the margin value, and this is to move the position after positioning

position: absolute; /*相对定位或绝对定位均可*/ 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);

Method 4: flex layout (recommended)

Using flex layout, setting the centering of child elements in the vertical direction and the centering of child elements in the horizontal direction can achieve the effect of vertical centering

display: flex; 
align-items: center; /*垂直居中*/ 
justify-content: center; /*水平居中*/

Method five: grid grid layout (recommended)

The implementation principle is the same as flex layout

display：grid; 
align-items: center; /*垂直居中*/ 
justify-content: center; /*水平居中*/