In web page writing often need to center an element, so next, I will introduce you to a few ways to center.

1. The element is centered

The general elements are divided into the following aspects:

  • Text center/inline elements/inline block elements are horizontally and vertically centered
  • Multiple lines of text are centered horizontally and vertically
  • Know the width and height of horizontal and vertical centered elements
  • There is no way to know the width and height of elements that need to be horizontally or vertically centered

1.1 Text Center/In-line Element/In-line block element 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>Text is centered horizontally and vertically</title>
    <style>
      .outer-wrapper {
        width: 500px;
        line-height: 50px; /* Use rows high in */
        background: chocolate;
        text-align: center; /* Text centered */
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">I need to center</div>
  </body>
</html>
Copy the code

Summary: use text-align to center horizontally, and use line-height to center vertically.

Disadvantages: Inability to center multi-line text.

1.2 Center multiple lines of text horizontally and vertically

The idea of horizontal centralization for multiline text is to enclose the multiline text with an inline block element. Next, a single line of text is centered horizontally and vertically. You also need to add line-height\text-align\vertical-align to the inline block element.

So what is an inline block element? How do I add inline block elements? Inline block elements combine the characteristics of inline and block-level elements. Inline block elements do not occupy a line, just the content size, but the width and height of inline block elements can be set. So, how do you add an inline block element? Here, we can turn the SPAN tag into an inline block element by adding the span tag and using the display attribute in CSS. display: inline-block; . The display attribute can turn an element into not only an inline block, but also a block-level element and an inline element. Set display to block and inline-block respectively

span {
    display: inline-block;
}
Copy the code

Center multiple lines of text. The code is as follows:

<! 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>Text is centered horizontally and vertically</title>
    <style>
      .outer-wrapper {
        width: 500px;
        line-height: 150px; /* Use rows high in */
        background: # 333;
        text-align: center; /* Text centered */
      }
      .inter-wrapper {
        display: inline-block;
        width: 400px;
        line-height: 20px;
        text-align: left;
        vertical-align: middle;
        background: cornflowerblue;
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">
      <span class="inter-wrapper">I need to be centered, I need to be centered, I need to be centered, I need to be centered, I need to be centered, I need to be centered, I need to be centered</span>
    </div>
  </body>
</html>

Copy the code

Line-height \text-align\vertical-align = vertical-align First of all, let’s not set it and see what it looks like. We can comment out a piece of code using /** **/.

<style>
  .outer-wrapper {
    width: 500px;
    line-height: 150px; /* Use rows high in */
    background: # 333;
    text-align: center; /* Text centered */
  }
  .inter-wrapper {
    display: inline-block;
    width: 400px;
    /** line-height: 20px; text-align: left; vertical-align: middle; * * /
    background: cornflowerblue;
  }
</style>
Copy the code

Annotated styles

Uncommented style

Why is that? Because CSS styles can be inherited, child elements can inherit certain styles from their parent elements. Line-height and text-align are inherited from the inter-wrapper child. So we need to reset the line-height and text-align attributes of the inter-wrapper child elements.

1.3 Know the width and height of horizontal and vertical centered elements

Margin: 0 auto; margin: 0 auto; margin: 0 auto; The way to de-center elements. The code is as follows:

<! 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</title>
    <style>
      .outer-wrapper {
        width: 500px;
        line-height: 50px; /* Use rows high in */
        background: chocolate;
        margin: 0 auto;
        text-align: center; /* Text centered */
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">I need to center</div>
  </body>
</html>
Copy the code

If we need to center both horizontally and vertically, we can do so in the following three ways:

  • Position + margin to 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</title>
    <style>
      .outer-wrapper {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 500px;
        height: 300px;
        margin-left: -250px;
        margin-top: -150px;
        background: chocolate;
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">I need to center</div>
  </body>
</html>
Copy the code

  • Position + margin to 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</title>
    <style>
      .outer-wrapper {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        width: 500px;
        height: 300px;
        margin: auto;
        background: chocolate;
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">I need to center</div>
  </body>
</html>

Copy the code
  • Position + calc.
<! 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</title>
    <style>
      .outer-wrapper {
        position: absolute;
        left: calc(50% - 250px);
        top: calc(50% - 150px);
        width: 500px;
        height: 300px;
        background: chocolate;
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">I need to center</div>
  </body>
</html>
Copy the code

1.4 It is impossible to know the width and height of horizontal and vertical centered elements

What can we do if we don’t know the width and height of the elements that need to be horizontal and vertical? You can use the following three methods:

  • Flex layout

Basically, it sets the following attributes to its parent element

display: flex;
justify-content: center;
align-items: center;
Copy the code

The complete code is shown below

<! 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</title>
    <style>
      .outer-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 500px;
        height: 300px;
        border: 1px solid royalblue;
      }
      .inter-wrapper {
        background: sandybrown;
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">
      <span class="inter-wrapper">I need to center</span>
    </div>
  </body>
</html>
Copy the code

  • Position + transform: translate(
<! 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</title>
    <style>
      .outer-wrapper {
        position: relative;
        width: 500px;
        height: 300px;
        border: 1px solid royalblue;
      }
      .inter-wrapper {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: sandybrown;
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">
      <span class="inter-wrapper">I need to center</span>
    </div>
  </body>
</html>
Copy the code
  • The grid layout
<! 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>Text is centered horizontally and vertically</title>
    <style>
      .outer-wrapper {
        display: grid;
        width: 500px;
        height: 300px;
        border: 1px solid royalblue;
      }
      .inter-wrapper {
        align-self: center;
        justify-content: center;
        background: sandybrown;
      }
    </style>
  </head>
  <body>
    <div class="outer-wrapper">
      <span class="inter-wrapper">I need to center</span>
    </div>
  </body>
</html>
Copy the code

2. Today’s summary

  • Text/inline elements/inline block elements can be usedtext-align: centerHorizontal center
  • Text/inline elements/inline block elements can be usedline-heightVertical center
  • Multi-line text can be used to wrap an inline block element in an outer layer and then in useText-align: center, line-height, vertic-alignIn the middle
  • For elements whose width and height are knownPosition + negative margin, position+margin and position+calcIs in the middle.
  • This can be used for elements of unknown width and heightPosition + Transform, Flex layout and Grid layoutIs in the middle