Center in CSS: full guidance

Center in CSS: full guidance
Horizontal center: Horizontally1. Line ElementText-align: center;2. single block-level elementYou can set the center of a block-level element. If you have set the width of the block element, set its margin-left and margin-right to auto. If you do not set the width, the block-level elements are usually full of their parent elements. {Width: 200px;
Margin: 0 auto;
} Normally, you cannot center a floating element.3. Multiple Block-level elements are horizontally centered in one rowYou can modify the display attribute of these block-level elements to inline-block or flexbox. Inline-block // The parent element sets text-align to center. inline-block-center {text-align: center;
} // Set display to inline-block. inline-block-center div {display: inline-block;
Text-align: left;
}
Flexbox: directly set the display of the parent element to flex, and use the parent element as the auto scaling box to display. flex-center {display: flex;
Justify-content: center;
}Vertical center: Vertically 1. Line Element 1.1 elements in a single rowSometimes an element or text element in a row looks vertical and centered, just because its top and bottom margins have the same value. . Link {padding-top: 30px;
Padding-bottom: 30px;
} If you do not want to select padding, you can also set the line-height value to be equal to the height value. . Center-text-trick {height: 100px;
Line-height: 100px;
White-space: nowrap;
}
More than 1.2 row ElementsSetting the same padding-top and padding-bottom results in vertical center for multiple row elements. However, if the padding settings are poor, we can also use table and table-cell. Use vertical-align as the middle for the elements whose display is table-cell. . Center-table {display: table;
Height: 250px;
Width: 240px;
Background-color: white;
}. Center-table p {display: table-cell;
Margin: 0;
Background-color: black;
Color: white;
Vertical-align: middle;
} If the table is out of date, you can try flexbox. A flex sub-element can be easily centered in its flex parent element. . Flex-center-vertically {display: flex;
Justify-content: center;
Flex-direction: column;
} Note: the vertical center condition must be that its parent element has a fixed height. If the preceding vertical center methods fail, you can only use the 'ghost element' technology and use the pseudo element. A full-height pseudo element is placed in the parent container. The vertical center element is centered with it. . Ghost-center {position: relative;
}. Ghost-center: before {content :;
Display: inline-block;
Height: 100%;
Width: 1%;
Vertical-align: middle;
}. Ghost-center p {display: inline-block;
Vertical-align: middle;
}2. Block-level elements 2.1 Do you know the height of an element?In the webpage layout, It is very common to know the height of a block element, because when the width of the block element changes, its content also changes with the height. The text style changes the overall height of the text. The text content size also changes the overall height of the text. Elements with fixed Aspect Ratio examples. For example, img also changes the height when it is adjusted to an hour. But if you know the height of the element, you can change the vertical center of the element to:. parent {position: relative;
}. Child {position: absolute;
Top: 50%;
Height: 100px;
Margin:-50px;
}2.2 unknown element heightWe can still press this element to half of the parent element, and then push it up a little bit, as shown below:. parent {position: relative;
}. Child {position: absolute;
Top: 50%;
Transform: Maid (-50% );
}Can 2.3 use the flexbox of CSS3?Yes, and very easy. . Parent {display: flex;
Flex-direction: column;
Justify-content: center;
}
3. Center horizontally and vertically 1. fixed width and height of ElementsFirst, absolutely locate the element, first let it locate at 50%/50% of the parent element, and then use the negative margin to make it equal to half of the width and height of the element. The Code is as follows. parent {position: relative;
}. Child {width: 300px;
Height: 100px;
Padding: 20px;
Position: absolute;
Top: 50%;
Left: 50%;
Margin:-70px 0 0-170px;
}2. The width and height of the element are unknown.
If you do not know the width and height of an element, you can use the transition over-attribute of CSS3, use the translate function, and move the element-50% in both the X and Y directions. . Parent {position: relative;}. child {position: absolute;
Top: 50%;
Left: 50%;
Transform: translate (-50%,-50% );
}3. Use flexbox of CSS3
Use the center attribute in two directions of flexbox. The Code is as follows:. parent {display: flex;
Justify-content: center;
Align-items: center;
}