The CSS is centered

This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August

The level of

1. The inline element is horizontally centered and utilizedtext-align: centerInline elements inside block-level elements can be horizontally centered. This method works with inline elementsinlineInline blocks,inline-block, inline tableinline-table.inline-flexHorizontally centered elements are valid.

.center-text {
    text-align: center;
 }
Copy the code

2. Block-level elements are horizontally centered by placing the block-level elements of a fixed widthmargin-leftandmargin-rightSet auto to center the block-level elements horizontally.

.center-block {
  margin: 0 auto;
}
Copy the code

3 Multiple block-level elements are horizontally centered

• usinginline-blockIf there are two or more block-level elements in a row, set the display type of the block-level elements toinline-blockAnd the parent containertext-alignProperty to center multiple block-level elements horizontally.

.container {
    text-align: center;
}
.inline-block {
    display: inline-block;
}
Copy the code

• usingdisplay: flex, to achieve horizontal center, wherejustify-contentUsed to set the alignment of the elastic box elements along the main (horizontal) axis, in this case to set the child elements to be horizontally centered.

.flex-center {
    display: flex;
    justify-content: center;
}
Copy the code

vertical

1. A single line of inline elements is vertically centered

Center an inline element vertically by setting the height of the inline element equal to the line height.

#v-box {
    height: 120px;
    line-height: 120px;/ / vertical
}
Copy the code

2. Multiple row elements are vertically centered

• Using table layoutstablethevertical-align: middleVertical centering of child elements is possible.

.center-table {
    display: table;
}
.v-cell {
    display: table-cell;
    vertical-align: middle;
}
Copy the code

• Using Flex layoutflexAchieve horizontal vertical center, whereflex-direction: columnDefine the principal axis as vertical. Because the Flex layout is defined in CSS3, there are compatibility issues with older browsers.

/ / vertical
.center-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
Copy the code

• usingGhost ElementThe technique achieves vertical centering by placing a pseudo-element of 100% height in the parent container so that the text and the pseudo-element are aligned vertically.

.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;
    width: 20rem;
}
Copy the code

3. Block-level elements are vertically centered

• Fixed height of block level element by absolutely positioning element 50% away from top, and setmargin-topOffset the element up by half the height to achieve vertical centering.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}
Copy the code

• For block-level elements of unknown height, we can use CSS3transformThe method with a 50% reverse shift of the property to the Y axis achieves vertical centering. However, some browsers have compatibility issues.

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
Copy the code