• There are 5 ways to center horizontally, 5 ways to center vertically, 7 ways to center horizontally, there are only 6 ways to center horizontally;

One. Horizontal center

Indicates that the current element is in the parent element container and is horizontally centered. There are several methods:

Solution a: text – align: center;

Add to the parent elementtext-align:center; Horizontal center can be achieved if the child elements are inline elements, inline block elements, text.Copy the code

Scheme 2: single block-level element is horizontally centeredmargin

The child element width must be smaller than the parent element width, and the child element width must be fixed.

Child element Settingsmargin:0 auto;
Copy the code

Scheme 3: horizontally center multiple block-level elementsInline blocks

1. Child element Settingsdisplay: inline-block;
2. Add to the parent elementtext-align:center;
3. Newline Spaces of inline block elements create gaps that need to be set to the parent element to eliminatefont-size: 0px; However, it will affect the text in the child element, you can set the text size for the child element separately;Copy the code

Scheme four: positioning (no need for width and height)

The values of top, right,bottom and left are relative to the size of the parent element, while the values of margin or transform are relative to the size of the parent element.

Set absolute positioning for child elements and relative positioning for parent elements:left: 50%;
            margin-left: -150px; ortransform: translateX(-50%);  
            /*-150px is half its width */
Copy the code

Plan 5: Use any element flex

Principle: Set the current axis alignment to center and set two attributes for the parent elementdisplay: flex;
                       justify-content: center;
Copy the code

Two. Vertical center

Solution a:line-height

For single-line text/in-line element/in-line block-level element: the height equals the value of the line height.parent { 
            height:150px;
            line-height:150px; // Height equals row height; }Copy the code

Scheme 2: multi-line text/inline elements/inline block-level elements

  • Line height: equal to height/ number of lines
.parent{
            height:150px;
            line-height:30px;   /* Line height = height/ line number; * /
        } 
Copy the code

Scheme 3: Picture elements

.wrapper {
	height: 200px;
	line-height: 200px;
	font-size: 0;
     }
     
.img     {
	vertical-align: middle;
    }
    /* vertical-align: middle; Attribute does not align the vertical midpoint of the child element with the vertical midpoint of the parent element, but rather aligns the vertical midpoint of the element with the baseline of the parent element plus 1/2 the height of the letter X in the parent element. When the font size is 0, the base line is the same as the center line. * /
Copy the code

Scheme 4: There are multiple methods for a single block-level element

4.1- 使用 tabel-cell 实现:
    .parent {
      display: table-cell;
      vertical-align: middle;
    }
Copy the code
4.2- 使用 position 实现:
  • The values of top, right, bottom and left are relative to the size of the parent element, while the values of margin or transform are relative to the size of the parent element, which can be combined to achieve the purpose of vertical centralization.
     #parent {
      position: relative;
    }
    #child {
      height: 100px;
      position: absolute;
      top: 50%;
      margin-top: -50px; // Half of its own height is reversedtransform:translateY(-50%)} or#child {
      height: 100px;
      position: absolute;
      margin:auto;top:0;bottom:0; }Copy the code
4.3- Implemented with Flex
.parent {
        display: flex;
        align-items: center;
      }
Copy the code

Scheme 5: Any element:

    .parent {
        display: flex;
        align-items: center; } or.parent {
        display: flex;
      }
      .son {
        align-self: center; } or.parent {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
Copy the code

Three. Horizontal and vertical center (center layout)

  • Center layout is actually both horizontal and vertical center;

Original style:

 .father {
        height: 200px;
        background-color: red;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
Copy the code

Plan 1: Use margin+overflow

 .son {
        margin: 50px auto;
      }
      
 .father {
        overflow: hidden;
      }
Copy the code

Option 2: Give the parent element the padding(just squeeze it in one direction)

To know the width and height of the parent element, fill the parent element, subtract half the size of the parent box from the size of the child box, and then add the weird combination model to the parent box.father {
        padding: 50px 0 0 50px;
        box-sizing: border-box;
      }
Copy the code

Scheme three: positioning: the child must father phase

The orientation of the child element is set to 50% and its reverse movement is 50%, including margin and transform

.father {
        position: relative;
      }
.son {
        position: absolute;
        top: 50%;
        left: 50%;
      }
 /* This moves the top left corner of the child element to the center of the parent element */Next you should do this: reverse half of yourself. Son {transform:translate(-50%, -50%); } or do this:.son {
        margin: -50px 0 0 -50px;
      }
Copy the code

Scheme 4: Positioning: set the four directions of the upper, lower and left to 0, and then set margin: Auto

 .father {
        position: relative;
      }
 .son {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
Copy the code

Scheme five: Flex set two axis direction arrangement

 .father {
        display: flex;
        justify-content: center; /* The main axis is centered */
        align-items: center; /* The cross axis is centered */
      }
Copy the code

Scheme 6: table-cell+margin

 .father {
        display: table-cell;
        vertical-align: middle; /* Make the child element its own content, vertically centered */
      }
      
 .son {
        margin: 0 auto;/* You are left and right centered */
      }
/* Advantages: browser compatibility is relatively good; Disadvantages: The vertical-align attribute is inheritable, causing the text of the parent element to be centered; * /
Copy the code

Scheme 7: Center the table-cell with multiple lines of text horizontally and vertically

 .father {
        display: table-cell; /* The simulation is a TD cell and forms a BFC */
        vertical-align: middle; /* Vertical center */
        text-align: center; /* Horizontal center */
      }
      
  .son {
        display: inline;
      }
Copy the code