One. Horizontal center

1. Horizontally center a single element

Horizontally centered individual elements should be easiest, with text-align: center for the inline elements container and magin:0 auto for the block-level elements themselves

<div class="Specified - width - the ele text - align - center">
    <span class="inline-ele">I'm the inline element, so I'm text-align centered</span>
    <div class="block-ele margin-0-auto">I'm a block-level element, and I'm centered with Magin</div>
</div>
Copy the code
.specified-width-ele {  /* Outer block level parent */
  width: 800px;
  height: 100px;
  border: 1px solid #e3e3e3
}
.inline-ele {            /* Inline child element */
  border: 1px solid #e3e3e3
}
.block-ele {             /* Internal block-level child */
  width: 200px;
  border: 1px solid #e3e3e3
}
.margin-0-auto {
  margin: 0 auto;
}
Copy the code

2. Inline-block versions of horizontally centered elements

  <div class="Specified - width - the ele text - align - center">
    <div class="block-ele display-inline-block">Block level element 1</div>
    <div class="block-ele display-inline-block">Block-level element 2</div>
    <div class="block-ele display-inline-block">Block-level element 3</div>
  </div>
Copy the code
.display-inline-block {
  display: inline-block;
}
Copy the code

The parent element is set to text-align:center, and the child element display:inline-block. The spacing between blocks can be removed with no Spaces between labels

[Note] To be compatible with IE7-browsers, use display:inline; Zoom :1 to achieve the inline-block effect

3. Flexbox edition with horizontally centered elements

 <div class="Specified - width - the ele display - flex - 13">
    <div class="block-ele">Block level element 1</div>
    <div class="block-ele">Block-level element 2</div>
    <div class="block-ele">Block-level element 3</div>
 </div>
Copy the code
.display-flex-13 {
  display: flex;
  justify-content: center;
}
Copy the code

[1] Set the axis alignment to justify-content:center on the flex container

[2] Set margin: 0 auto on the scaling project

[Note] Internet Explorer 9- not supported

This method centers all block-level child elements, although display:inline-block requires both parent and child elements to have CSS or extra classes, but you can control the number of child elements in the center

Two. Vertical center

1. Vertically center an inline element

(1) vertically centered single line inline element

  <div class="Specified - width - ele">
    <span class="inline-ele line-height-2-1-1">I'm a single-line inline element, and I center it vertically with line-height</span>
  </div>
Copy the code
.line-height-2-1-1 {
  line-height: 100px;
}
Copy the code

Always see a popular saying on the Internet, single line vertical center to set the height and line height to the same value, but the height is not necessary to set. In fact, the text itself is centered on a line. Row height can spread height without setting height

(2) A table-cell version of a vertically centered multi-line inline element

  <div class="Specified - width - the ele table - 2-1-2">
      <span class="inline-ele table-cell-2-1-2">I'm a single inline element 1</span>
      <span class="inline-ele table-cell-2-1-2">I'm a single inline element 2</span>
      <span class="inline-ele table-cell-2-1-2">I'm a single inline element 2</span>
  </div>
Copy the code
.table-2-1-2 {
  height: 100px;
  width: 800px;
  display: table;
}
.table-cell-2-1-2 {
  display: table-cell;
  vertical-align: middle;
}
Copy the code

By setting vertical-align:middle for the table-cell element, all its elements are vertically centered. This is similar to the vertical center of cells in a table.

[Note] Divs set to table-cell cannot use floating or absolute positioning, because floating or absolute positioning would give the element block-level element properties and thus lose the vertical alignment that table-cell elements have. If floating or absolute positioning is required, an additional div layer is required.

(3) Flexbox version of vertically centered multi-line inline elements

<div class="Specified - width - the ele display - flex - 2-1-3">
    <span class="inline-ele">I'm a single inline element 1</span>
    <span class="inline-ele">I'm a single inline element 2</span>
    <span class="inline-ele">I'm a single inline element 3</span>
</div>
Copy the code
.display-flex-2-1-3 {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
Copy the code

2. Center the block element vertically

Compared to horizontal center, vertical center is a little more difficult, mostly due to the incorrect use of vertical-align. As a matter of fact, as long as you have enough provisions, you can march naturally, and then you can reserve some ideas about vertical living in the middle, so that you are well prepared.

(1) Absolutely centered CALC version

  <div class="Specified - width - the ele position - the relative">
    <div class="block-ele absolute-calc-vertical-align">I'm a block-level element, and I center position: Absolute and calc vertically</div>
  </div>
Copy the code
.absolute-calc-vertical-align {
  height: 20px;        /* The height added here is to calculate the top, and also shows the drawbacks of this method */                   
  position: absolute; 
  left: calc(50% - 100px);
  top: calc(50% - 10px);
}
Copy the code

Obviously, the biggest problem with this approach is that the element needs a fixed size, whereas the size of an element that needs to be vertically centered is often determined by its content. If we had a way to control element size using percentages, our problem would be solved. Unfortunately, the percentage value for most CSS attributes (including margin) is determined relative to the width of their parent element

(2) Absolutely centered translate

  <div class="Specified - width - the ele position - the relative">
    <div class="block-ele absolute-translate-vertical-align">I'm a block-level element, and I center position: Absolute and Translate vertically</div>
  </div>
Copy the code
.absolute-translate-vertical-align {
  position: absolute;   /* No height added here, and text adaptation are the advantages of this method */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

The percentage of translate is relative to its height, so top:50% is centered with translateY(-50%)

Compared with the above methods, disadvantages :(1) absolute positioning is usually not a good choice, because it has a considerable impact on the overall layout. (2) If the content of the vertically centered element is higher than the window height, its top will be clipped off.

[Note] Internet Explorer 9- not supported

If the height of the child element is known, the translate() function can also be replaced with margin-top: the negative height

(3) flexbox center

<div class="Specified - width - the ele display - flex">
   <div class="block-ele margin-auto">I'm a block-level element, and I center the parent element flexbox and my margin vertically</div>
</div>
Copy the code
.display-flex {
  display: flex;
}
.margin-auto {
  margin: auto;
}
Copy the code

[1] Set the side axis alignment mode of align-items: Center on the flex container

[2] Set margin: Auto 0 on the scaling project