Super detailed horizontal vertical solution for CSS elements (horizontally centered with floating elements)

Normal horizontal and vertical centered

Remark:

PC side compatibility requirements, fixed width and height, recommended absolute + negative margin

The WIDTH and height of the PC are not fixed. Css-table is recommended

The PC does not meet compatibility requirements. Flex is recommended

Flex is recommended for mobile devices

0. Horizontal center

The text resides in Chinese and French

.son {
    text-align: center;
}
Copy the code

Margin centered method

.son {
    margin: 0 auto;
}
Copy the code

1. Single-line text

The vertical center of etc

The line – height method
- Does not work with text that needs a line break and is centered by a single line of line-height.
- ```
.text{
	line-height: parent container height; }Copy the code
```

Inline-block + pseudoelement fill method

.parent::after..son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:' ';
    height:100%;
}
Copy the code

2. Text that needs to be wrappedAnd block-level elements, inline block-level elements, etc

Parent element line method

Only vertical center is supported
The center element must be set to inline-block

.parent {
    width: 800px;
    height: 800px;
    background-color: aqua;
    line-height: 800px;
}
.son {
    display: inline-block;
    vertical-align: middle;
    line-height: 30px;
}
Copy the code

Padding method
- The padding of the parent element is extruded to center the content vertically and horizontally.
- Apply to display: [the inline | inline – block | block]

Analog table method

With a table layout, vertical and horizontal centers can be achieved, and can only be centered for a child element

.parent {
  display: table;
}
.son {
  display: table-cell;
  vertical-align: middle;/* Vertical center */
  text-align: center;/* Horizontal center */
}
Copy the code

Relative positioning + adjusting position method

Inline-block is perfectly compatible with horizontal and vertical center

div > span {
    display: inline-block;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
Copy the code

Inline is invalid because margin and translate are not available

The block is set in a special way, which can be centered horizontally and vertically

div.parent > div.son {
        width: fit-content;/* Ensure the correct transform, similar to converting to inline-block */
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
}
Copy the code

The method of adjusting the position of the parent + the child

The child element may not be visible when there is not enough space for the parent element. If the child element sets Overflow: Auto, the scroll bar appears when the height is insufficient.

Using transform compatible with all displays, you can adjust the horizontal and vertical center

.parent {
    width: 800px;
    height: 800px;
    background-color: aqua;
    position: relative;
}
.son {
    display: inline-block;/* [block]|[inline] */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);/ *] [margin - left: 0.5 width | * /
}
Copy the code

To use margin, you need to know the width of the element to be centered. Since it is absolute, inline width can also be set.

.parent {
    width: 800px;
    height: 800px;
    background-color: aqua;
    position: relative;
}
.son {
    display: inline-block; /* [block]|[inline] */
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px
}
Copy the code

Margin: 0 auto, horizontal center only, inline, inline-block, block

.parent {
    width: 800px;
    height: 800px;
    background-color: aqua;
    position: relative;
}
.son {
    display: inline; /* [block]|[inline] */
    position: absolute;
    width: fit-content;
    left: 0;
    right: 0;
    margin: 0 auto;
}
Copy the code

Flex & Box (best!)

The 2012 version supports horizontal and vertical center

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
Copy the code

The 2009 version supports horizontal and vertical center

.parent {
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}
Copy the code

3. Center with float elements

Width to determine

Just use the appropriate width or ‘fit-content’

nestedTo use
The above level is in France

.parent{
    width:fit-content;
    margin:0 auto;
}
.son {
    float: left;
}
Copy the code

width

Parent phase child positioning method, support multiple float elements, see example

<style>
    .father {
        width: 100px;
        height: 100px;
        background-color: green;
        float: left;/* converts it to the width element */
        position: relative;
        left: -50%; /* Internal float element moves 50% right */
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
        position: relative;/* The child must be the father */
        left: 50%;/* The parent element moves 50% right */
    }
<style>

<div class="father">
	<div class="son"></div>
</div>
Copy the code

Navigation bar case (float element centered)

<! 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>Document</title>
    <style>
      .clearfix:after {/* False elements are normal browser clear float methods for inline elements */ content:"";
        display: block;/* Clear only applies to block-level elements */
        height: 0;
        clear: both;
        visibility: hidden;
      }
      .clearfix {
        *zoom: 1; /* In Internet Explorer 6, only Internet Explorer 6-Internet Explorer 7 executes the */ method
      }
        /* Parent element */
      div.container {
        border: 1px solid rgba(0.0.0.0.6);
        float: left;
        position: relative;
        left: 50%;
      }
       	/* child element, which contains all floating elements */
      div.container > div {
        position: relative;
        left: -50%;
      }
      .left {
        width: 100px;
        height: 100px;
        background-color: rgba(0.0.0.0.2);
        float: left;
      }
      .right {
        width: 100px;
        height: 100px;
        background-color: rgba(0.0.200.0.2);
        float: left;
      }
      .center {
        float: left;
      }
      ul.unorder_list {
        margin: 0;
        padding: 0;
      }
      ul.unorder_list > li {
        width: 100px;
        height: 100px;
        background-color: rgba(0.200.0.0.2);
        list-style: none;
        float: left;
      }
      :not(ul.unorder_list > li:last-child) {
        /* margin-right: 10px; * /
      }
    </style>
  </head>
  <body>
    <div class="container clearfix">
      <div class="left"> < /div>
      <div class="center">
        <ul class="unorder_list">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="right"> < /div>
    </div>
  </body>
</html>
Copy the code

Super detailed horizontal vertical solution for CSS elements (horizontally centered with floating elements)

Normal horizontal and vertical centered

0. Horizontal center

The text resides in Chinese and French

Margin centered method

1. Single-line text The vertical center of etc

The line – height method