Vertical center

The problem with CSS is that it’s vertically centered. There are several ways to achieve vertical center, but each method has certain limitations. Therefore, vertical center can be used according to actual business scenarios.

The best way to center content in a container is to consider different factors depending on the particular scenario. Before you judge, ask yourself the following questions one at a time until you find a solution.

  • The contents of the container are only one line of text, right?
  • Container natural height?
  • Does the container need to specify height or avoid using inside margins?
  • useFlexboxThe layout?
  • You know the height of the container and the height of the contents?
  • Don’t know the height of the inner element?

The contents of the container are only one line of text

Set a large row height equal to the ideal container height. This allows the container height to expand to accommodate row heights. If the content is not an inline element, it can be set to inline-block.

<! DOCTYPEhtml>
<html lang="en">
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      height: 60px;
      background-color: #1888fa;
      color: white;
    }
    span {
      line-height: 60px;
    }
  </style>
  <body>
    <div>
      <span>The test center</span>
    </div>
  </body>
</html>
Copy the code

Natural height of container

The simplest way to center a container vertically in CSS is to give the container an equal upper and lower inner margin, and let the container and its contents determine their own height.

Take a look at the example below to make the content perpendicular to the parent container by setting the padding-top and padding-bottom equal.

<! DOCTYPEhtml>
<html lang="en">
   <style>
      * {
        padding: 0;
        margin: 0;
      }
      div {
        padding-top: 20px;  
        padding-bottom: 20px;
        background-color: #1888FA;
        color: white;
      }
    </style>
    <body>
      <div>
         <span>The test center</span>
      </div>
    </body>
</html>
Copy the code

Containers need to specify height or avoid inside margins

We can set display: table to the parent container and display: table-cell to the child element; vertical-align: middle; To center the child element vertically.

<! DOCTYPEhtml>
<html lang="en">
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      width: 100%;
      height: 60px;
      background-color: #1888fa;
      color: white;
      display: table;
    }
    span {
      display: table-cell;
      vertical-align: middle;
    }
  </style>
  <body>
    <div>
      <span>The test center</span>
    </div>
  </body>
</html>
Copy the code

Using FlexBox

Using Flex layouts is very easy when doing centralization.

<! DOCTYPE html><html lang="en">
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #1888fa;
      color: white;
    }
  </style>
  <body>
    <div>
      <span>The test center</span>
    </div>
  </body>
</html>
Copy the code

The height of the container and content is known

Absolute positioning of content is recommended only if it is impossible to achieve otherwise.

<! DOCTYPEhtml>
<html lang="en">
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      height: 100px;
      background-color: #1888fa;
      color: white;
      position: relative;
    }
    span{
      position: absolute;
      top: 35px;
      display: inline-block;
      height: 30px;
    }
  </style>
  <body>
    <div>
      <span>The test center</span>
    </div>
  </body>
</html>
Copy the code

We don’t know the height of the inner element

Use absolute position + Transform for content, which is recommended only if all other methods fail.

<! DOCTYPEhtml>
<html lang="en">
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      height: 100px;
      background-color: #1888fa;
      color: white;
      position: relative;
    }
    span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <body>
    <div>
      <span>The test center</span>
    </div>
  </body>
</html>
Copy the code

conclusion

Which approach should be used based on the actual business scenario.

reference

How to Center in CSS