CSS居中布局全攻略-优快云博客

水平居中

行内元素水平居中

用一个块状元素包裹，然后使用text-align:center居中
块状元素水平居中
将margin-left和margin-right设置为auto
多个块状元素水平居中
1. 将块状元素的display转换为inline-*,然后在其父元素上使用text-align:center
2. 使用flex进行布局

display: flex;
justify-content: center;

垂直居中

行内元素垂直居中
1. 设置相同的padding值
2. 将line-height的值与height的相等
多行行内元素垂直居中
1. 相同的padding-top与padding-bottom值
2. 使用table居中

#multiple-inline-ver table {
    background: white;
    width: 240px;
    border-collapse: separate;
    margin: 20px;
    height: 250px;
}

#multiple-inline-ver table td {
    background: black;
    color: white;
    padding: 20px;
    border: 10px solid white;
    /* default is vertical-align: middle; */
}
<div id="multiple-inline-ver">
    <table>
      <tr>
        <td>
          I'm vertically centered multiple lines of text in a real table cell.
        </td>
      </tr>
    </table>
</div>

将父元素display设置为table,自身display设置为table-cell，然后对本身元素设置垂直对齐方式vertical-align:middle

#multiple-inline-ver .center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
#multiple-inline-ver .center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}

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

使用flex布局方式

#flex-ver .flex-center {
    background: black;
    color: white;
    border: 10px solid white;
    display: flex;
    /* 垂直居中，要将主轴方向换为column */
    flex-direction: column;
    justify-content: center;
    /* 父容器必须有高度值 */
    height: 200px;
    resize: vertical;
    overflow: auto;
}

<div id="flex-ver">
    <div class="flex-center">
      <p>I'm vertically centered multiple lines of text in a flexbox container.</p>
    </div>
</div>

5.使用"ghost element"技术

.ghost-center {
    position: relative;
    background: white;
    width: 240px;
    height: 200px;
    margin: 20px;
    color: white;
    resize: vertical;
    overflow: auto;
    padding: 20px;
}
.ghost-center::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
.ghost-center p {
    display: inline-block;
    vertical-align: middle;
    width: 190px;
    margin: 0;
    padding: 20px;
    background: black;
}

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

块状元素垂直居中
1. 知道元素的高度值

#block-ver main {
    background: white;
    height: 300px;
    margin: 20px;
    width: 300px;
    position: relative;//父元素相对定位
    resize: vertical;
    overflow: auto;
}

#block-ver main div {
    position: absolute;//子元素绝对定位
    top: 50%;//居父元素上边距距离为父元素高度的50%
    left: 20px;
    right: 20px;
    height: 100px;
    margin-top: -50px;//使用margin负值来本身高度的一半来将其居中
    background: black;
    color: white;
    padding: 20px;
}

<div id="block-ver-kown">
    <main>
      <div>
         I'm a block-level element with a fixed height, centered vertically within my parent.
      </div>
    </main>
</div>

不知道元素的高度值

#block-ver-unkown main {
  background: white;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;//父元素相对定位
  resize: vertical;
  overflow: auto;
}

#block-ver-unkown main div {
  position: absolute;//子元素绝对定位
  top: 50%;//设置距离父元素垂直距离的位置
  left: 20px;
  right: 20px;
  background: black;
  color: white;
  padding: 20px;
  transform: translateY(-50%);//设置向上偏移量
  resize: vertical;
  overflow: auto;
}

<div id="block-ver-unkown">
    <main>
      <div>
         I'm a block-level element with an unknown height, centered vertically within my parent.
      </div>
    </main>
</div>

flex布局

#flex-ver-block main {
  background: white;
  height: 300px;
  width: 200px;
  padding: 20px;
  margin: 20px;
  display: flex;//父元素弹性布局
  flex-direction: column;//主轴方向设为垂直方向
  justify-content: center;//主轴方向居中
  resize: vertical;
  overflow: auto;
}

#flex-ver-block main div {
  background: black;
  color: white;
  padding: 20px;
  resize: vertical;
  overflow: auto;
}

<div id="flex-ver-block">
    <main>
      <div>
         I'm a block-level element with an unknown height, centered vertically within my parent.
      </div>
    </main>
</div>

水平方向与垂直方向同时居中

元素有固定宽度和高度

#hor-ver-fixed main {
  position: relative;//父元素相对定位
  background: white;
  height: 200px;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  resize: both;
  overflow: auto;
}

#hor-ver-fixed main div {
  background: black;
  color: white;
  width: 200px;
  height: 100px;
  margin: -50px 0 0 -100px;//设置偏移量使其居中
  position: absolute;//子元素绝对定位
  top: 50%;//设置与父元素距离
  left: 50%;//设置与父元素距离
  padding: 20px;
}

<div id="hor-ver-fixed">
    <main>
      <div>
         I'm a block-level element a fixed height and width, centered vertically within my parent.
      </div>
    </main>
</div>

元素没有固定高度与宽度值

#hor-ver-unkown main {
  position: relative;//父元素相对定位
  background: white;
  height: 200px;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  resize: both;
  overflow: auto;
}

#hor-ver-unkown main div {
  background: black;
  color: white;
  width: 50%;
  transform: translate(-50%, -50%);//设置偏移量使其居中
  position: absolute;//子元素绝对定位
  top: 50%;//设置与父元素距离
  left: 50%;//设置与父元素距离
  padding: 20px;
  resize: both;
  overflow: auto;
}

<div id="hor-ver-unkown">
    <main>
      <div>
         I'm a block-level element of an unknown height and width, centered vertically within my parent.
      </div>
    </main>
</div>

flex布局，应用在父元素上，可以不用知道居中元素的高度与宽度值，，但是需要知道父元素的高度与宽度值

#hor-ver-flex main {
  background: white;
  height: 200px;//
  width: 60%;
  margin: 10px auto;
  padding: 20px;
  display: flex;//flex布局
  justify-content: center;//水平居中
  align-items: center;//垂直居中
  /* 指定一个div元素，允许用户调整大小： */
  resize: both;
  overflow: auto;
}

#hor-ver-flex main div {
  background: black;
  color: white;
  width: 50%;
  padding: 20px;
  resize: both;
  overflow: auto;
}
<div id="hor-ver-flex">
    <main>
      <div>
         I'm a block-level-ish element of an unknown width and height, centered vertically within my parent.
      </div>
    </main>
</div>

总结：行内元素水平居中主要使用text-align:center的方法，块状水平元素居中主要使用margin:auto的方法,行内元素垂直居中主要使用line-height = height的方法,块状元素垂直居中主要使用绝对定位法，此外flex布局都可以使用，但是是应用在父元素上，并且对子元素应用什么居中，就需要知道它本身所对应的值

转载自：https://css-tricks.com/centering-css-complete-guide/