The scope of center alignment mainly includes:

  • The text inside the div is centered
  • A single div is centered within the parent component
  • Multiple divs are centered within the parent component

Initial example:Code:

<! DOCTYPE HTML > < HTML lang="en" dir=" LTR "> <head> <meta charset=" UTF-8 "> <title> Center </title> </head> <body> <div class="container" > <div class="yellow-box">kim</div> <div class="blue-box"></div> <div class="red-box"></div> </div> <canvas id="mycanvas" width="400" height="400"></canvas> </body> <script type="text/javascript"> var canvas = document.getElementById('mycanvas') var ctx = canvas.getContext("2d"); ctx.beginPath(); CTX. MoveTo (0, 0); CTX. LineTo (400400); CTX. MoveTo (400, 0); CTX. LineTo (0400); CTX. MoveTo (200, 0); CTX CTX. LineTo (200400). The stroke (); </script> <style media="screen"> #mycanvas { position: absolute; top: 8px; } .container { background: gray; height: 400px; width: 400px; position: relative; } .blue-box { background: blue; height: 50px; width: 50px; } .yellow-box { background: yellow; height: 60px; width: 50px; } .red-box { background: red; height: 80px; width: 60px; } </style> </html>Copy the code

Single row elements are horizontally centered

Div text is horizontally centered. If it is a single line, use line-height and text-align to center the text.

.yellow-box {
  background: yellow;
  height: 60px;
  width: 50px;
  text-align: center;
  line-height: 60px;
}
Copy the code

If you go beyond one line, then you can’t completely center it, because if you set the line height to match the height of the container, the second line will be pushed out of the container. This can be done with text-overflow and overflow implementation overruns. Instead, keep the single line centered.

.yellow-box {
  background: yellow;
  height: 60px;
  width: 50px;
  text-align: center;
  line-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 	// 不断行
}
Copy the code

The div element is horizontally centered within the parent component

Horizontally centered div elements within the parent component are easiest to implement,

  1. You can usemargin: 0 autoWith a fixed width,
  2. ortext-align: center
  3. Also throughpositionProperty with set offset implementation.
  4. Flex layout
  5. You can use it if you don’t mindfloat
  6. position:table-cell+ vertical-align: middle

The following specific introduction of horizontal, vertical middle realization of several ways.

Text-align + vertical-align + pseudo-class to center multiple divs

Vertical-align implements inline, inline-block,table-cel box elements in the center, so if you use vertical-align, div can be set to display: Inline-block is implemented with the parent component text-align: center.

.container {
  background: gray;
  height: 400px;
  width: 400px;
  text-align: center;
}
.blue-box {
  background: blue;
  height: 50px;
  width: 50px;
  vertical-align: middle;
  display: inline-block;

}
.yellow-box {
  background: yellow;
  height: 60px;
  width: 50px;
  vertical-align: middle;
  display: inline-block;

}
.red-box {
  background: red;
  height: 80px;
  width: 60px;
  vertical-align: middle;
  display: inline-block;
}
Copy the code

Above, the three div elements are centered and horizontally centered, but not vertically centered within the parent component. The trick here is to use the pseudo-class to add an element with a height of 100%, in which case the center line is vertically centered.

.container::before { content: ''; width: 1px; // Set it to 1px, otherwise set it to 0, height: 100%; background: white; Vertical-align: bottom; display: inline-block; }Copy the code

display table-cell

It is fairly easy to center text vertically in a < TD > element of a form. Vertical-align :middle is all you need, because < TD > elements default to a table-cell layout. You can also center the table by setting display: table-cell

Table -cell centers the text

    .yellow-box {
      background: yellow;
      height: 60px;
      width: 50px;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
Copy the code

Table-cell implements div centering

    .container {
      background: gray;
      height: 400px;
      width: 400px;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    /* .container::before {
      content: '';
      width: 1px;
      height: 100%;
      background: white;
      vertical-align: middle;
      display: inline-block;
    } */
    .blue-box {
      background: blue;
      height: 50px;
      width: 50px;
      display: inline-block;
      vertical-align: middle;
    }
    .yellow-box {
      background: yellow;
      height: 60px;
      width: 50px;
      display: inline-block;
      vertical-align: middle;
    }
    .red-box {
      background: red;
      height: 80px;
      width: 60px;
      display: inline-block;
      vertical-align: middle;
    }
Copy the code

Position relative implementation is centered

When position: relative is set, elements will not leave the document stream. The offset parameters top, right, bottom, and left refer to the element’s original position. This pattern is suitable for centering a single div element within a parent component, but not for multiple div elements whose references are different because of their different initial positions.

For example, “yellowbox” is easier to center in the original image, offset the top and left by 50%, and then fill in the width. If it’s a bluebox, if you want to offset it, you’re referring to the original position, which was below yellowbox, and you have to worry about the height of yellowbox.

There are two specific implementation methods, one is to use CALC to calculate the attribute directly calculate the offset, the other is to use tranForm attribute offset by half of its width and height of 50%

    .yellow-box {
      background: yellow;
      height: 60px;
      width: 50px;
      position: relative;
      top: calc(50% - 30px);
      left: calc(50% - 25px);
    }
Copy the code

or

    .yellow-box {
      background: yellow;
      height: 60px;
      width: 50px;
      position: relative;
      /* top: calc(50% - 30px);
      left: calc(50% - 25px); */
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
Copy the code

You can see that yellowbox is centered, but the original position is still occupied, and the bluebox is placed next to yellowbox.

Position Absolute Implements center alignment

It is also possible to align single div elements within the parent component with absolute, but div elements are separated from the flow of the document. If multiple divs overlap, it is possible to set position: relative within the parent.

In the absolute case, the offset is referenced by the parent component

It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

    .container {
      background: gray;
      height: 400px;
      width: 400px;
	  position: relative;
    }
    .yellow-box {
      background: yellow;
      height: 60px;
      width: 50px;
      position: absolute;
      top: calc(50% - 30px);
      left: calc(50% - 25px)
    }
Copy the code

Yellowbox is centered because yellowbox is out of the document stream and does not occupy the original position, so if bluebox is centered the same way, it will overlap.

The Flex implementation is centered

The most common flex layout implementation today is centered and easy to use. The context-content attribute defines the alignment of items on the main axis, which is horizontal to the right by default. The align-items property defines how items are aligned on the cross axis, which by default is straight down.

    .container {
      background: gray;
      height: 400px;
      width: 400px;
      display: flex;
      justify-content: center;  
      align-items: center;     
    }
    .blue-box {
      background: blue;
      height: 50px;
      width: 50px;
    }
    .yellow-box {
      background: yellow;
      height: 60px;
      width: 50px;
    }
    .red-box {
      background: red;
      height: 80px;
      width: 60px;
    }
Copy the code