css vertical horizontal fully centered manual-CSS Tutorial-php.cn

css vertical horizontal fully centered manual

伊谢尔伦

Release： 2016-11-23 09:21:27

Original

1157 people have browsed it

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;
}

Copy after login

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;
}

Copy after login

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>

Copy after login

<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;
}

Copy after login

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;
}

Copy after login

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;
}

Copy after login

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>

Copy after login

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;
}

Copy after login

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; 的盒子模型则需要设置这个 */
}

Copy after login

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%);
}

Copy after login

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>

Copy after login

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;
}

Copy after login

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;
}

Copy after login

　元素的宽度高度未知

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

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

Copy after login