This time, thoroughly understand the vertical and horizontal center

Whether in the interview or at work, it is a necessary basic skill for front-end engineers to center an element horizontally or vertically. Next, let's systematically sort out and summarize the topic of centering.

1, Horizontal center

Inline element

HTML structure 

  <div class="parent">
    <span class="child">111</span>
  </div>

Centering method: set text align: Center for its parent element;

text-align: center;

Block level element

General block element

Just set margin: 0 auto for this element.

margin: 0 auto;

The child element contains a float

You can set the width of the parent element to: fit content.

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

flex layout is horizontally centered

By setting the following two properties for the parent element:

display: flex;
justify-content: center;

Absolute positioning + left + transform

Set the following css style for the child element. (Note: the following translate moves relative to itself)

position: absolute;
left: 50%;
transform: translate(-50%,0);

Absolute positioning + left + margin left

Set the following CSS styles for child elements.

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

Absolute positioning + left/right + margin

Set the following CSS style for the parent element.

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

2, Vertical center

Inline element

Single line text

Set the row 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;
}

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

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

Block level element

Inline block element

You can add a sibling element to the inline block element, set the height of the sibling element to be consistent with that 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;
}

  <div class="parent">
    <div class="child">child</div>
    <div class="brother">brother</div>
  </div>

flex layout

Just set display:flex and align items: Center for the parent element.

display: flex;
align-items: center;

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

The absolute positioning of the child and the relative positioning of the parent. At the same time, set their four positioning edges to 0, and then set them to 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;
}

table-cell + vertical-align

This vertical centering method only needs to set display: table cell and vertical align: middle for 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;
}

Child absolute parent relative + margin offset

This kind of positioning first requires the absolute parent phase of the child, and then offset through the margin. The disadvantage is that you need to know the width and height.

.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;
}

Self denial relative to parent + transform

The child element sets the absolute positioning, the parent element sets the relative positioning, and then translates the offset through 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%);
}

With pseudo elements

Set the before pseudo element inside the parent element. The height of the pseudo element is set to 100%, the content is set to empty, and it is set as an inline block element, and then set the inline vertical alignment. Child elements should also be set as inline block elements, with inline vertical alignment.

.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;
}

3, Vertically and horizontally centered

Variable width and height

Note: the indefinite width and height here refers to the unknown width and height of the child element, not the unknown width and height of the parent element.

Mode 1: absolute positioning + transform

  • HTML structure 
  <div class="parent">
    <div class="child">child</div>
  </div>
  • CSS Style
  <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>

Mode 2: table cell layout

  • HTML Styles 
  <div class="parent">
    <div class="child">child</div>
  </div>
  • css Style
  <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>

Mode 3: flex layout

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

Mode 4: flex + margin:auto

  • HTML Styles 
  <div class="parent">
    <div class="child">child</div>
  </div>
  • css Style
  <style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: flex;
    }
    .child {
      margin: auto;
      background: yellow;
    }
  </style>

Mode 5: grid layout + flex layout

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

Mode 6: grid layout + margin: auto

  • HTML Styles 
  <div class="parent">
    <div class="child">child</div>
  </div>
  • css Style
  <style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: grid;
    }
    .child {
      background: yellow;
      margin: auto
    }
  </style>

Fixed width and height

Note: the fixed width and height here means that the width and height of the child element are known.

Method 1: absolute positioning + negative margin value

  • HTML Styles 
  <div class="parent">
    <div class="child">child</div>
  </div>
  • CSS Style
  <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>

Mode 2: absolute positioning + transform (common for fixed width / variable width)

  • HTML Styles 
  <div class="parent">
    <div class="child">child</div>
  </div>
  • CSS 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%;
  transform: translate(-50%,-50%);
}

Method 3: absolute positioning + left/top/right/bottom + margin: auto

  • HTML Styles 
  <div class="parent">
    <div class="child">child</div>
  </div>
  • css Style
  <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>

Mode 4: flex layout (fixed width height and variable width height: General)

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

Mode 5: grid layout + margin: auto (general)

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

Mode 6: table cell layout (general)

  • HTML Styles 
  <div class="parent">
    <div class="child">child</div>
  </div>
  • CSS Style
.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;
}

4, Picture centering method

For the vertical and horizontal centering of pictures, you can refer to several general vertical and horizontal centering methods mentioned above. The principle is the same.

  • Absolute positioning + transform

  • flex layout

  • grid layout + margin: auto

  • Table cell layout

5, Adaptive vertical horizontal centering

  • Method 1: absolute positioning + left/top/right/bottom + margin: auto

  • Mode 2: absolute positioning + transform

  • Mode 3: flex layout

Tags: Front-end css3 html css

Posted on Thu, 11 Nov 2021 02:50:07 -0500 by truegilly

Hot Tags

©2023 Programmer Help