This is the 29th day of my participation in Gwen Challenge

preface

If you need to check out CSS in an interview, you might ask:

Can you talk about some of the ways that vertical center can be implemented?

Margin: auto if you want the box to be centered inside the box, text-align if you want the box to be centered inside the box. Center can be implemented, but there are more ways to implement vertical centralization than horizontal centralization. Today let’s look at several ways to implement vertical centralization.

line-height

For a single line of text, we want to center it vertically, most conveniently using line-height. Use line-height equal to the height of the parent element, or the parent element does not need to set the height, but the child element can set line-height.

Remember: line-height only supports single lines of text

Examples of implementation:

  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .son {
      text-align: center;
      color: #fff;
      line-height: 200px;
    }
  </style>
  <div class="father">
    <div class="son">I'm a single line of text</div>
  </div>
Copy the code

table-cell + vertical-align

Set the parent element to display:table and the child element to display:table-cell and vertical-align:center.

  <style>
    .father {
      display: table;
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .son {
      display: table-cell;
      text-align: center;
      color: #fff;
      vertical-align: middle;
    }
  </style>
  <div class="father">
    <span class="son">I'm multiline text I'm multiline text I'm multiline text I'm multiline text</span>
  </div>
Copy the code

margin: auto

Marign: Isn’t auto in the middle? Why is it possible to center vertically?

In this case, not only marign: auto, but also absolute (fixed), top,bottom,left and right must be set to 0;

This method requires the child element to be set to a height, otherwise there is no effect;

Let’s see by example

  <style>
    .father {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .son {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      height: 100px;
      background-color: red;
    }
  </style>
  <div class="father">
    <span class="son"></span>
  </div>
Copy the code

Absolute position + margin

Relative is used for the parent element and absolute is used for the child element. Note that the child element is fixed width and height, and top is used: 50% and left:50% are relative to the parent element. At this time, the child element is not centered, but tilted to the lower right corner, because the child element moves according to the coordinate of the upper left corner. Finally, use margin-top: half of its height and margin-left: half of its width to move itself to the center.

Here’s an example:

  <style>
    .father {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .son {
      position: absolute;
      height: 100px;
      width: 100px;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
      background-color: red;
    }
  </style>
  <div class="father">
    <span class="son"></span>
  </div>
Copy the code

Absolute Position + Transform

This is similar to absolute position + margin:

Also use relative with the parent element and absolute with the child element, using top: 50% and left:50% are relative to the parent element. In this case, the child element is not centered, but is tilted to the lower right corner, because the movement of the child element is based on the coordinates of the upper left corner, but in this case, the child element moves to the center using the transform: Translate (-50%, -50%), because now translate(-50%, -50%), relative to their own width and height.

In this way, the child elements can be of variable width and height, which is very flexible.

Here’s an example:

  <style>
    .father {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .son {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: red;
      color: #fff;
    }
  </style>
  <div class="father">
    <span class="son">I'm multiline text multiline text I'm multiline text multiline text</span>
  </div>
Copy the code

Flex layout

Finally, flex layout. This is an elastic layout. Css3 added a layout that can be vertically centered with a property called align-items: Center.

In the project is very convenient to use, do not have to write too much redundant code, except ie low version can be compatible;

In this way the child elements can be of indefinite width and height.

Here’s an example:

  <style>
    .father {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .son {
      background-color: red;
      color: #fff;
    }
  </style>
  <div class="father">
    <span class="son">I'm multiline text multiline text I'm multiline text multiline text</span>
  </div>
Copy the code

The last

The above is my summary of several vertical in the middle of the way, you can have a look, you can use the code to tap, deepen the impression, the next time the interviewer asked a question, you can answer.

I often use flex layout and Absolute position + Transform in my projects, because these two child elements can be arbitrary width and height, so everyone can try it out and choose their own.

Hope to be helpful to you ~