css vertical horizontal fully centered manual

Horizontal centering

　Centering an inline element (inline or inline-*)?

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

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

  Centering a block level element?

　You can pass Set margin-left and margin-right to auto to center it (also set width, otherwise it will fill the entire container and the centering effect cannot be seen), 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.

　 Online example: http://jsfiddle.net/ourjs/0b6b7wt8/

<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 of inline elements (inline or inline-*), like text and Link like that?

　Is it one line?

Sometimes elements can behave like they are 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 to make it match Equal height to align text.

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

Is it multi-line?

　 Top and bottom padding can also be used to center multiple lines, but if this method doesn’t work, you can make the containers of these words display in table cell mode, and then set the vertical-align attribute of the text to align, just like talbe

Online demonstration: http://jsfiddle.net/ourjs/0fn2u4rc/

<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 element (block level) vertical centering?

Do you know the height of the element?

　For many reasons, it is quite common not to know the height of the web layout.

　But if your layout has a fixed height, you can vertically center it 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 it is unknown, it is still possible for you to push up by 50% of the width

Online demo: http ://jsfiddle.net/ourjs/9sLf7p56/

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

Can you use flexbox?

　This is not surprising, it is much easier to use flexbox

<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 at the same time

　The element has a fixed width and height

If the width and height of the element are fixed, you need to absolutely center it first and then top it Just move and left 50% of the width. 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;
}

　元素的宽度高度未知

　　如果你不知道高度和宽度（可变的），你可以使用transofrm属性在两个方向都平移负50%

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