The element is centered horizontally and vertically

  • Set up two boxes, the relationship is parent: parent element
<body>
    <div class="parent">
    	<div class="child">
    	    child
    	</div>
    </div>
</body>
Copy the code

Method 1: Same width height +padding

  • Set the width and height of the parent element to the same size as the child element, then set the padding of the parent element. Now the padding squeezes the child into the middle of the parent;
  • At this point, the parent and child elements can be enabled or not;
*{ margin: 0; padding: 0; } .parent{ width: 100px; height: 100px; /* Use the padding setting to squeeze out the center; < span style = "box-sizing: border-box; color: RGB (50, 50, 50); line-height: 20px; white-space: normal; border: 1px solid; margin: 100px auto; } .child{ width: 100px; height: 100px; background: pink; line-height: 100px; text-align: center; }Copy the code

Absolute + margin: Auto

  • Parent element relative positioning, child element absolute positioning;
  • Left + Right +width+padding+margin= the width of the block; So you can set the left and right (default is auto, so reset) to 0, and the padding is already set (default is 0px if not), so the rest is margin, but the default margin is 0px. So magin is set to Auto so that the element is automatically centered;
  • Left, right, top, and bottom are 0. Margin for the auto;

*{margin: 0; padding: 0; } .parent{ position: relative; width: 200px; height: 200px; /*padding: 100px; */ border: 1px solid; margin: 100px auto; } .child{ position: absolute; /*left+right+width+padding+margin= 00 100 0 auto =300*/ left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100px; height: 100px; background: pink; line-height: 100px; text-align: center; }Copy the code

Absolute + negative margin (or transform)

  • Parent versus child absolute, upper and lower 50%, margin negative
  • The powerful Absolute is also very simple for such small problems;
  • Absolute positioning is removed from the document flow and does not affect the layout of subsequent elements. But if the absolute positioning element is the only element then the parent element also loses height.
  • Parent element relative positioning, child element absolute positioning;
  • Set the child elements left and right directly to 50%, relative to the parent element;
  • Then use margin-left and margin-top as the negative half of the child element. That is to drag back the part that is out of the center of the parent element;
.parent{
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid;
}
.child{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    width: 100px;
    height: 100px;
    background: pink;
    line-height: 100px;
    text-align: center;
}
Copy the code
  • If you don’t know the width and height of the child element, use transfrom: translate3D (-50%-50%);
    • Transform is a CSS3 attribute, which has compatibility problems.
transfrom:translate3d(-50% -50% ); /* width: 100px; height: 100px; * /Copy the code
  • However, when this method is not used on the elements that need 3d transformation, there will be some influence;

Method 4: Inline-block +table-cell

  • Good compatibility
<style>
  .parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }
</style>
Copy the code

Method 5: Flex layout

  • You only need to set the parent node properties, not the child elements
  • Compatibility issues
// Set the parent element to display: flex; justify-content:center; align-items:Center;Copy the code

The text element is centered vertically and horizontally

  • Set line height and text-align:
line-height: 50px;
text-align:center;
Copy the code
  • Flex layout
display: flex;
justify-content:center;
align-items:Center;
Copy the code

A unilateral horizontal center or vertical center layout can be implemented as described above