css居中大全

Horizontally 水平居中

• 内联元素

 text-align: center;

• 块级元素

margin: 0 auto;

• 多个块级元素

  display: flex;
  justify-content: center;

Vertically 垂直居中

• 内联元素中单行文字

  给定相同padding
   padding-top: 30px;
  padding-bottom: 30px;

• 文字垂直居中

  height: 100px;
  line-height: 100px;
  white-space: nowrap;

• 内联元素中多行文字

<table>
  <tr>
    <td>
      I'm vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>
table布局下文字默认垂直居中
/* default is vertical-align: middle; */

方法二 display:table-cell

<div class="center-table">
  <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>

body {
  background: #f06d06;
  font-size: 80%;
}



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

方法三 flex 布局

 display: flex;
  justify-content: center;
  flex-direction: column;

方法四 伪类 vertical-align

<div class="ghost-center">
  <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
</div>

body {
  background: #f06d06;
  font-size: 80%;
}

div {
  background: white;
  width: 240px;
  height: 200px;
  margin: 20px;
  color: white;
  resize: vertical;
  overflow: auto;
  padding: 20px;
}

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";display: inline-block; height: 100%; width: 1%;vertical-align: middle;
}
.ghost-center p {display: inline-block;vertical-align: middle;
}

块级元素

• 已知宽高

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

• 未知宽高

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

• flex大法

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

水平垂直居中

• 已知元素宽高

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

• 未知元素宽高

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

• flex大法

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

• grid布局

<span>
  I'm centered!
</span>
body, html {
  height: 100%;
  display: grid;
}
span {
  margin: auto;
}