This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Centering an element horizontally or vertically is an essential skill for a front-end engineer, whether in an interview or on the job. Let’s systematically sort out and summarize the topic of centering.

One, horizontal center

Inline elements

HTML structure

  <div class="parent">
    <span class="child">111</span>
  </div>
Copy the code

Text-align: center;

text-align: center;
Copy the code

Block-level elements

Generic block element

Simply set margin: 0 auto to the element.

margin: 0 auto;
Copy the code

The case where the child element contains float

You can give the parent element a width of: fit-Content.

.parent {
    margin: 0 auto;
    width: fit-content;
}
.child {
    float: left
}
Copy the code

The Flex layout is horizontally centered

By giving the parent element the following two attributes:

display: flex;
justify-content: center;
Copy the code

Absolute position + left + transform

Set the following CSS styles for the child elements. (Note: The translate below moves relative to itself.)

position: absolute;
left: 50%;
transform: translate(-50%.0);
Copy the code

Absolute positioning + left + margin-left

Set the following CSS styles for the child elements.

position: absolute;
left: 50%;
margin-left: calc(-0.5*100px);
Copy the code

Absolute positioning + left/right + margin

Set the following CSS styles for the parent element.

position: absolute;
left: 0;
right: 0;
margin: 0 auto;
Copy the code

Two, vertical center

Inline elements

Single-line text

Set the height of the child element to the height of the parent element.

.parent {
  width: 200px;
  height: 200px;
  text-align: center;
  border: 1px solid red;
  margin: 0 auto;
}
.child {
  line-height: 200px;
  background-color: pink;
}
Copy the code

It is also possible to set both the row height and height on the parent element.

.parent {
  width: 200px;
  height: 200px;
  line-height: 200px;
  border: 1px solid red;
}
Copy the code

Block-level elements

Inline block elements

You can add a sibling element to the inline block element, and set the height of the sibling element to the height of the parent element, and set the font size to 0.

.parent {
  width: 400px;
  height: 400px;

  border: 1px solid red;
}
.child..brother {
  display: inline-block;;
  vertical-align: middle;
}
.child {
  background: blue;
  font-size: 12px;
}
.brother {
  height: 400px;
  font-size: 0;
}
Copy the code
  <div class="parent">
    <div class="child">child</div>
    <div class="brother">brother</div>
  </div>
Copy the code

Flex layout

Simply set display:flex and align-items: center to the parent element.

display: flex;
align-items: center;
Copy the code

+ left/top/right/bottom + margin: auto

Margin: Auto; margin: auto; margin: auto; margin: auto; margin: auto

.parent {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid red;
}

.child {
  width: 200px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; 
  margin: auto;
  background: blue;
  font-size: 12px;
}
Copy the code

table-cell + vertical-align

For this method, just set display: table-cell and vertical-align: middle to the parent element.

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: middle;
}

.child {
  width: 200px;
  height: 100px;
  background: blue;
}
Copy the code

Child absolute parent relative + margin offset

In this positioning, the parent phase needs to be separated from the child first, and then offset by margin. The disadvantage is that the width and height need to be known.

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  position: relative;
}

.child {
  width: 200px;
  height: 100px;
  background: blue;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}
Copy the code

From absolute parent + transform

The child element is set to absolute positioning, the parent element is set to relative positioning, and then the translation offset is performed by transform.

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  position: relative;
}

.child {
  width: 200px;
  height: 100px;
  background: blue;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
Copy the code

With pseudo-elements

Inside the parent element, set the before pseudo-element to 100% height, empty content, and inline block elements, and then set the inline vertical alignment. Child elements are also set to inline block elements, aligned vertically.

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  text-align: center;
}

.child {
  width: 200px;
  height: 100px;
  background: blue;
  display: inline-block;
  vertical-align: middle;
}
.parent::before {
  height: 100%;
  content: ' ';
  display: inline-block;
  vertical-align: middle;
}
Copy the code

Three, vertical horizontal center

Indefinite wide high

Note: the variable width here refers to the unknown width of the child element, not the unknown width of the parent element.

Mode 1: Absolute position + Transform

  • HTML structure
  <div class="parent">
    <div class="child">child</div>
  </div>
Copy the code
  • CSS styles
  <style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      position: relative;
    }
    .child {
      position: absolute;
      background: yellow;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
Copy the code

Method 2: Table -cell layout

  • HTML style
  <div class="parent">
    <div class="child">child</div>
  </div>
Copy the code
  • CSS styles
  <style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    .child {
      background: yellow;
      display: inline-block;
    }
  </style>
Copy the code

Approach 3: Flex layout

  • HTML style
  <div class="parent">
    <div class="child">child</div>
  </div>
Copy the code
  • CSS styles
  <style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .child {
      background: yellow;
    }
  </style>
Copy the code

Flex + margin: Auto

  • HTML style
  <div class="parent">
    <div class="child">child</div>
  </div>
Copy the code
  • CSS styles
  <style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: flex;
    }
    .child {
      margin: auto;
      background: yellow;
    }
  </style>
Copy the code

Approach 5: Grid layout + Flex layout

  • HTML style
  <div class="parent">
    <div class="child">child</div>
  </div>
Copy the code
  • CSS styles
  <style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: grid;
    }
    .child {
      background: yellow;
      align-self: center;
      justify-self: center;
    }
  </style>
Copy the code

Method 6: Grid layout + Margin: Auto

  • HTML style
  <div class="parent">
    <div class="child">child</div>
  </div>
Copy the code
  • CSS styles
  <style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: grid;
    }
    .child {
      background: yellow;
      margin: auto
    }
  </style>
Copy the code

Fixed width high

Note: constant width height here means that the width height of the child element is known.

Method 1: Absolute positioning + negative margin

  • HTML style
  <div class="parent">
    <div class="child">child</div>
  </div>
Copy the code
  • CSS styles
  <style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      position: relative;
    }
    .child {
      background: yellow;
      position: absolute;
      width: 100px;
      height: 100px;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
    }
  </style>
Copy the code

Mode 2: Absolute positioning + Transform (fixed width/variable width universal)

  • HTML style
  <div class="parent">
    <div class="child">child</div>
  </div>
Copy the code
  • CSS styles
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}
.child {
  background: yellow;
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

Mode 3: Absolute positioning + left/top/right/bottom + margin: auto

  • HTML style
  <div class="parent">
    <div class="child">child</div>
  </div>
Copy the code
  • CSS styles
  <style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      position: relative;
    }
    .child {
      background: yellow;
      position: absolute;
      width: 100px;
      height: 100px;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
Copy the code

Mode 4: Flex layout (Constant width and variable width: universal)

  • HTML style
  <div class="parent">
    <div class="child">child</div>
  </div>
Copy the code
  • CSS styles
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .child {
      background: yellow;
      width: 100px;
      height: 100px;
    }
Copy the code

Mode 5: Grid layout + Margin: Auto

  • HTML style
<div class="parent">
   <div class="child">child</div>
</div>
Copy the code
  • CSS styles
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  display: grid;
}
.child {
  background: yellow;
  width: 100px;
  height: 100px;
  margin: auto;
}
Copy the code

Mode 6: Table-cell Layout (General)

  • HTML style
  <div class="parent">
    <div class="child">child</div>
  </div>
Copy the code
  • CSS styles
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.child {
  background: yellow;
  width: 100px;
  height: 100px;
  display: inline-block;
}
Copy the code

4. The method of centralizing pictures

For image vertical horizontal center, you can refer to the above mentioned several general vertical horizontal center methods, the principle is the same.

  • Absolute position + Transform

  • Flex layout

  • Grid layout + Margin: Auto

  • Table – cell layout

Five, adaptive vertical horizontal center

  • Mode 1: Absolute positioning + left/top/right/bottom + margin: auto

  • Mode 2: Absolute position + Transform

  • Approach 3: Flex layout