玩轉 css 居中

文字居中

文字的水平居中

1. 對於非 inline 元素內的文字水平居中均可以經過 text-align: center; 完成。

2. 也能夠設置 margin: 0 auto;

文字（單行）的垂直居中

這種場景一般在修正 input 框光標和文字的位置。設置 line-height 的值等於 height 便可。

文字（單行）的相對居中

/Users/alex/Desktop/24319F76-DE76-4A5A-840D-8EC7C0C43882.png
例如圖中的情況，須要文字相對於圖片的垂直居中，經過對圖片設置vertical-align: middle;便可。vertical-align 其實能夠完成多種相對對其，例如 top,baseline 等等。

元素居中

內部元素的寬高已知

本方法應該是用的很是多的了，直接看代碼吧

.outer {
    width: 100%;
      height: 500px;
    position: relative;
}
.inner {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  background-color: blue;
}

上面方法在 css 中加入 calc 以後能夠作以下優化 （安卓 4.3 以上，IE9＋）

.outer {
  width: 100%;
  height: 500px;
  position: relative;
}
.inner {
  position: absolute;
  width: 200px;
  height: 200px;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
  background-color: blue;
}

外部元素的高度已知

html:

<div class="outer">
  <div class="inner">
    <p>asjdhajshdkjhakjdshk</p>
    <p>sdalskjdkajls</p>
  </div>
</div>

1. table 搭配 table-cell 的方法

.outer {
  width: 100%;
  height: 300px;
  display: table;
  text-align: center;
}
.inner {
  display: table-cell;
  vertical-align: middle;
}

1. translate 方法（IE9 以上）

.outer {
  width: 100%;
  height: 500px;
  position: relative;
}
.inner {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
}

1. flex 方法
   該方法就很是簡單了，只須要設置 outer

.outer {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

內外元素高度均已知

html 模版沿用上面

.outer {
  width: 100%;
  height: 500px;
  position: relative;
  text-align: center;
}
.inner {
  height: 100px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

我相信本文絕對不是最全的 css 居中方式，但願各位大神們補充起來。