CSS Vertical and Horizontal Full Centering Manual

Centering has always been a typical complaint in CSS. Why is it so hard to implement? So someone was laughed at. I think the problem is not that there is no way to do it, it just depends on the situation. There are many different ways, but it is difficult to figure out which method should be used.

So I wrote this article, hoping to make it easier for him.

Horizontal centering

Center the inline element (inline or inline-*)?

You can center it relative to the parent block-level element

.center-children {
  text-align: center;
}

Block level element (block level) is centered?

You can center it by setting margin-left and margin-right to auto (and also set width, otherwise it will fill the entire container and cannot be seen) out of the centering effect), such as.

.center-me {
  margin: 0 auto;
}

What if there are many block-level elements?

If you have very even block-level elements that need to be centered horizontally in a row, you're better off using a different display type. Here is an example using inline-block and flex.

<main class="inline-block-center">
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
</main>
<main class="flex-center">
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I&#39;m an element that is block-like with my siblings and we&#39;re centered in a row.
  </div>
</main>

body {
  background: #f06d06;
  font-size: 80%;
}
main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}
main div {
  background: black;
  color: white;
  padding: 15px;
  max-width: 125px;
  margin: 5px;
}
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}
.flex-center {
  display: flex;
  justify-content: center;
}

Vertical centering

Vertical centering is a bit tricky in CSS

Centering inline elements (inline or inline-*), like text and links?

Is it one line?

Sometimes elements can appear to be vertically centered just because they have equal top and bottom padding

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

If padding doesn't work for some reason and the text doesn't wrap, you can Use line-height and make it equal to height to align the text.

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

Is it multi-line?

Padding methods such as top and bottom can also center multiple lines, but if this method doesn’t work, you can make the containers of these texts display in table cell mode, and then set the text The vertical-align attribute aligns, just like talbe

<table>
  <tr>
    <td>
      I&#39;m vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>
<div class="center-table">
  <p>I&#39;m vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>

body {
  background: #f06d06;
  font-size: 80%;
}
table {
  background: white;
  width: 240px;
  border-collapse: separate;
  margin: 20px;
  height: 250px;
}
table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}
.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}

Block level elements (block level) are vertically centered?

Do you know the height of the element?

It is quite common not to know the height of a web page layout for many reasons.

But if your layout has a fixed height, you can center it vertically like this:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 如果没有使用: border-box; 的盒子模型则需要设置这个 */
}

The height of the element is unknown

Although unknown, it is still possible for you to push the width up by 50%

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Can you use flexbox?

This is not surprising, using flexbox is much easier

<main>  
  <div>
     I&#39;m a block-level element with an unknown height, centered vertically within my parent.
  </div>  
</main>

body {
  background: #f06d06;
  font-size: 80%;
}
main {
  background: white;
  height: 300px;
  width: 200px;
  padding: 20px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  overflow: auto;
}
main div {
  background: black;
  color: white;
  padding: 20px;
  resize: vertical;
  overflow: auto;
}

Center horizontally and vertically simultaneously

Elements have fixed width and height

If the width and height of the element are fixed, you need to center it absolutely first, then move it up and to the left by 50% The width is sufficient, and this solution has excellent cross-browser support.

.parent {
  position: relative;
}
.child {
  width: 300px;
  height: 100px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -170px;
}

The width and height of the element are unknown

#If you don't know the height and width (variable), you can use the transofrm attribute in both directions Panning minus 50%

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

For more CSS vertical and horizontal completely centered manual related articles, please pay attention to the PHP Chinese website!