Interview question: To center a box vertically and horizontally?

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. `flex`layout

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. `grid`layout

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. `grid`Layout +`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 + negative`margin`

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 +`calc`methods

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. `flex`layout

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. `flex`Layout +`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. `grid`layout

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. `grid`Layout +`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

Interview question: To center a box vertically and horizontally?

moves

Fixed width high

1. flexlayout

2. gridlayout

3. gridLayout +margin

4. Absolute positioning + negativemargin

5. Absolute positioning +transform

6. Absolute positioning +calcmethods

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

8. table-cell + inline-block/margin

Indefinite wide high

1. flexlayout

2. flexLayout +marin

3. gridlayout

4. gridLayout +marin

5. Absolute positioning +transform

6. table-cell + inline-block

7. line-height + text-align

Method to

The inline element is centered

The block element is centered

Related Posts

What’s it like to develop a Big Big Wolf game from scratch?

React drag component simple encapsulation for use with React – DND

From the perspective of god, see the process of V8 js execution

`moves`

1. `flex`layout

2. `grid`layout

3. `grid`Layout +`margin`

4. Absolute positioning + negative`margin`

5. Absolute positioning +`transform`

6. Absolute positioning +`calc`methods

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

8. `table-cell` + `inline-block/margin`

1. `flex`layout

2. `flex`Layout +`marin`

3. `grid`layout

4. `grid`Layout +`marin`

5. Absolute positioning +`transform`

6. `table-cell` + `inline-block`

7. `line-height` + `text-align`

`Method to`