Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

A journey of a thousand miles begins with single step

moves

Fixed width high

1. flexlayout

Flex is one of the layouts I use most in my work, especially on the mobile end. Set the Flex layout to an external div and justify-content: Center; align-items: center; , can achieve horizontal and vertical center.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Flex layout</title>
  <style>
    .outsideBox {
      width: 400px;
      height: 400px;
      background-color: antiquewhite;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .innerBox {
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="outsideBox">
    <div class="innerBox"></div>
  </div>
</body>
</html>
Copy the code

The effect is shown below.

2. gridlayout

The grid layout is centered horizontally and vertically, with grid layout for external elements and context-self and align-self as center for internal elements.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>The grid layout</title>
  <style>
    .outsideBox {
      width: 400px;
      height: 400px;
      background-color: antiquewhite;
      display: grid;
    }
    .innerBox {
      height: 200px;
      width: 200px;
      background-color: skyblue;
      justify-self: center;
      align-self: center;
    }
  </style>
</head>
<body>
  <div class="outsideBox">
    <div class="innerBox"></div>
  </div>
</body>
</html>
Copy the code

The effect is shown below.

3. gridLayout +margin

Grid layout is centered horizontally and vertically, grid layout is set for external elements and margin is set to Auto for internal elements.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Grid layout + Margin</title>
  <style>
    .outsideBox {
      width: 400px;
      height: 400px;
      background-color: antiquewhite;
      display: grid;
    }
    .innerBox {
      height: 200px;
      width: 200px;
      background-color: skyblue;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="outsideBox">
    <div class="innerBox"></div>
  </div>
</body>
</html>
Copy the code

The effect is shown below.

4. Absolute positioning + negativemargin

Absolute positioning is combined with negative margin to achieve horizontal and vertical centering, and relative positioning position: relative is set for external elements. , set the absolute position of the internal elements position: absolute; And set the distance between the top and left as 50%, and then set the margin distance between the top and left as -height /2 and -width /2 respectively to realize the horizontal disposal center.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Horizontal and vertical center - Absolute +margin</title>
  <style>
    .outsideBox {
      width: 400px;
      height: 400px;
      background-color: aliceblue;
      position: relative;
    }
    .innerBox {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      position: absolute;
      top: 50%;
      left: 50%;
      /* margin: - high /2 00 - wide /2*/
      margin: -100px 0 0 -100px;
    }
  </style>
</head>
<body>
  <! -- Given the width and height of the inner box, using absolute positioning and margins -->
  <div class="outsideBox">
    <div class="innerBox"></div>
  </div>
</body>
</html>
Copy the code

The effect is shown below.

5. Absolute positioning +transform

Absolute positioning is combined with transform to achieve horizontal and vertical centering, and relative positioning position: relative is set for external elements. , set the absolute position of the internal elements position: absolute; In addition, the upper and left distances were set as 50%, and the displacement of transform to X-axis and Y-axis was set as -50% respectively, so as to realize the horizontal disposal center.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Absolute position + Transform</title>
  <style>
    .outsideBox {
      width: 400px;
      height: 400px;
      background-color: antiquewhite;
      position: relative;
    }
    .innerBox {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="outsideBox">
    <div class="innerBox"></div>
  </div>
</body>
</html>
Copy the code

The effect is shown below.

6. Absolute positioning +calcmethods

Absolute positioning with calC method to achieve horizontal and vertical center, set relative positioning position: relative for external elements; , set the absolute position of the internal elements position: absolute; And set the distance from the top and left as 50%-high /2 and 50%-wide /2 to achieve horizontal disposal center.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Absolute positioning + CALC method</title>
  <style>
    .outsideBox {
      width: 400px;
      height: 400px;
      background-color: antiquewhite;
      position: relative;
    }
    .innerBox {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      position: absolute;
      /* - With Spaces */ on both sides
      top: calc(50% - 100px);
      left: calc(50% - 100px);
    }
  </style>
</head>
<body>
  <div class="outsideBox">
    <div class="innerBox"></div>
  </div>
</body>
</html>
Copy the code

The effect is shown below.

7. Absolute positioning +left/right/bottom/top + margin

Absolute positioning with left/right/bottom/top with margin method to achieve horizontal and vertical center, set relative positioning position: relative for external elements; , set the absolute position of the internal elements position: absolute; And set the left, right, and upper distance to 0, and then set the margin value to auto to achieve horizontal disposal center.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>+ top/right/bottom/left + margin</title>
  <style>
    .outsideBox {
      width: 400px;
      height: 400px;
      background-color: antiquewhite;
      position: relative;
    }
    .innerBox {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="outsideBox">
    <p class="innerBox"></p>
  </div>
</body>
</html>
Copy the code

The effect is shown below.

8. table-cell + inline-block/margin

Combine display:table-cell with vertical-align and text-align, and set display:inline-block/margin: auto in the inner box to center all inline elements horizontally and vertically.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>table-cell + inline-block/margin</title>
  <style>
  .outsideBox {
      width: 400px;
      height: 400px;
      background-color: antiquewhite;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    .innerBox {
      height: 200px;
      width: 200px;
      background-color: skyblue;
      display: inline-block;
      /* Margin: auto; * /
      /* margin: auto; * /
    }
  </style>
</head>
<body>
  <div class="outsideBox">
    <div class="innerBox"></div>
  </div>
</body>
</html>
Copy the code

The effect is shown below.

Indefinite wide high

1. flexlayout

The flex layout can be used to center the inner box vertically and horizontally when the width and height are uncertain when the inner box is automatically propped open by its contents.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Flex layout</title>
  <style>
    .outsideBox {
      width: 400px;
      height: 400px;
      background-color: antiquewhite;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .innerBox {
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="outsideBox">
    <div class="innerBox">This is the text that opened the inside box</div>
  </div>
</body>
</html>
Copy the code

The effect is shown below.

2. flexLayout +marin

When the inner box is automatically stretched by its internal contents and the width is uncertain, flex layout can be used for the outer box, and margin: Auto is used to center the inner box vertically and horizontally.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Flex layout + Margin</title>
  <style>
    .outsideBox {
      width: 400px;
      height: 400px;
      background-color: antiquewhite;
      display: flex;
    }
    .innerBox {
      background-color: skyblue;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="outsideBox">
    <div class="innerBox">This is the text that opened the inside box</div>
  </div>
</body>
</html>
Copy the code

The effect is shown below.

3. gridlayout

The grid layout can be used to center the inner box vertically and horizontally when its width and height are uncertain, when the inner box is automatically propped up by its contents.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>The grid layout</title>
  <style>
    .outsideBox {
      width: 400px;
      height: 400px;
      background-color: antiquewhite;
      display: grid;
    }
    .innerBox {
      background-color: skyblue;
      align-self: center;
      justify-self: center;
    }
  </style>
</head>
<body>
  <div class="outsideBox">
    <div class="innerBox">This is the text that opened the inside box</div>
  </div>
</body>
</html>
Copy the code

The effect is shown below.

4. gridLayout +marin

When the inner box is automatically propped open by its inner content, the grid layout can be used for the outer box, and margin: Auto is used to center the inner box vertically and horizontally.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Grid layout + Margin</title>
  <style>
    .outsideBox {
      width: 400px;
      height: 400px;
      background-color: antiquewhite;
      display: grid;
    }
    .innerBox {
      background-color: skyblue;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="outsideBox">
    <div class="innerBox">This is the text that opened the inside box</div>
  </div>
</body>
</html>
Copy the code

The effect is shown below.

5. Absolute positioning +transform

Absolute positioning combined with Transform can also realize horizontal and vertical centering when the width and height of the internal box is uncertain. The principle is the same as the top width and height.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Absolute position + Transform</title>
  <style>
    .outsideBox {
      width: 400px;
      height: 400px;
      background-color: antiquewhite;
      position: relative;
    }
    .innerBox {
      background-color: skyblue;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="outsideBox">
    <div class="innerBox">This is the text that opened the inside box</div>
  </div>
</body>
</html>
Copy the code

The effect is shown below.

6. table-cell + inline-block

Use a combination of display:table-cell and vertical-align and text-align, and set display:inline-block in the inner box to center the inline elements with varying width and height horizontally and vertically.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>table-cell + inline-block</title>
  <style>
  .outsideBox {
      width: 400px;
      height: 400px;
      background-color: antiquewhite;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    .innerBox {
      background-color: skyblue;
      display: inline-block;
    }
  </style>
</head>
<body>
  <div class="outsideBox">
    <div class="innerBox">This is the text that opened the inside box</div>
  </div>
</body>
</html>
Copy the code

The effect is shown below.

7. line-height + text-align

Line-height is used with text-align in internal boxes to center boxes with varying width and height horizontally and vertically.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>line-height + text-align</title>
  <style>
  .outsideBox {
      width: 400px;
      height: 400px;
      background-color: antiquewhite;
    }
    .innerBox {
      width: 100%;
      line-height: 400px;
      text-align: center;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="outsideBox">
    <div class="innerBox">This is the text that opened the inside box</div>
  </div>
</body>
</html>
Copy the code

The effect is shown below.

Method to

The inline element is centered

  • Horizontal center

    • Inline elements:text-align: center;
    • Flex layout Settings parent element:display: flex; justify-content: center

  • Vertical center

    • Confirm height of single-line text parent element:height === line-height
    • Confirm height of multiline text parent element:display: table-cell; vertical-align: middle;

The block element is centered

  • Horizontal center

    • Fixed width:margin: 0 auto;
    • Indefinite width: see abovemoves —> Indefinite wide high

  • Vertical center

    • Set high:position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px;
    • Set high:position: fixed; margin: auto;
    • display: table-cell
    • transform: translate(x,y);
    • Indefinite width height:grid
    • Indefinite width height:flex