Horizontal and Vertical Centralization Scheme for Common Elements

flex realizes horizontal and vertical centering

Scenario: The width and height of both father and son are unknown. (It is recommended that this method be simple and compatible at present. )

<html>
  <head>
    <style>
      .parent {
          width: 100%;
          height: 100px;
          background: cyan;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .son {
          width: 20%;
          height: 20%;
          background: pink;
        }
    </style>
  </head>
  <body>
    <div class='parent'>
       <div class='son'></div>
    </div>
  </body>
</html>

Absolute positioning plus negative margin

Scenario: The width and height of the parent element are known and unknown, but the width and height must be first. Secondly, the width and height of the child element must be known, because the negative margin of the child element needs to be set. (Negative margin can also be set to translate to achieve displacement.)

<html>
  <head>
      <style>
      .parent {
          position: relative;
          width: 200px;
          height: 200px;
          background: pink;
        }
        .son {
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -25px;
          margin-top: -25px;
          width: 50px;
          height: 50px;
          background: yellow;
        }
      </style>
  </head>
  <body>
    <div class='parent'>
       <div class='son'></div>
    </div>
  </body>
</html>

Absolute positioning + auto margin

Scenario of application: When the width and height of the parent and child elements are unknown (this method does not need to know clearly the width and height of the child elements, and the available percentage of the width and height of the child elements, it is more suitable for the situation where the width and height of the child elements are uncertain and need to be in the middle. )

<html>
  <head>
    <style>
      .parent {
          position: relative;
          width: 200px;
          height: 200px;
          background: cyan;
        }
        .son {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          margin: auto;
          width: 10%;
          height: 10%;
          background: yellow;
        }
    </style>
  </head>
  <body>
    <div class='parent'>
       <div class='son'></div>
    </div>
  </body>
</html>

Grid layout

Applicable Scenario: The width and height of father and son elements are unknown, and the compatibility is not good.

<html>
  <head>
    <style>
      .parent {
          display: grid;
      }
      .son {
        jusitify-self: center;
        align-self: center;
      }
    </style>
  </head>
    <body>
      <div class='parent'>
       <div class='son'></div>
    </div>
    </body>
</html>

Table-cell + text-align + vertical-align

Scenario: The size of the parent element is known (non-percentage height), and the size of the child element is unknown, but the child element must be an in-line block element with good compatibility.

<html>
  <head>
    <style>
      .parent {
          display: table-cell;
          vertical-align: middle;
          text-align: center;
          width: 100vw;
          height: 90vh;
          background-color: yellowgreen;
        }
        .son {
          display: inline-block;
          width: 200px;
          height: 200px;
          background-color: Indigo;
        }
    </style>
  </head>
  <body>
    <div class='parent'>
       <div class='son'></div>
    </div>
  </body>
</html>

Pseudo element

Applicable Scenario: The width and height of both father and son are unknown, and the child elements need to be block elements in the row (in this way, the height of pseudo elements is 100%. Both child elements and pseudo elements are set vertical-align: middle to achieve the effect of vertical centering).

<html>
  <head>
    <style>
    .parent {
      height: 100vh;
      width: 100vw;
      text-align: center;
      background: #c0c0c0;
    }
     
    .parent:before {
      content: "\200B";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
     
    .son {
      display: inline-block;
      vertical-align: middle;
      width: 200px;
      height: 200px;
      padding: 10px 15px;
      background: #f5f5f5;
    }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="son"></div>
    </div>
  </body>
</html>

Keywords: Front-end

Added by freewholly on Tue, 08 Oct 2019 11:56:35 +0300

Programming VIP

Horizontal and Vertical Centralization Scheme for Common Elements

Popular Keywords