css垂直水平完全置中手冊

水平置中

　　內嵌元素（inline or inline-*）置中?

　　你可以讓他相對父級區塊層級元素置中對齊

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

區塊層級元素（block level）置中?

　　你可以通過設定margin-left和margin-right為auto讓它置中（同時還要設定width，否則它就會承滿整個容器，無法看出置中效果），如。

.center-me {  margin: 0 auto;}

如果有很多區塊層級元素呢？

　　如果你有很勻區塊層級元素需要水平置中成一行，你最好使用一個不同的display類型。這是一個使用inline-block和flex的例子。

　　線上樣本： http://jsfiddle.net/ourjs/0b6b7wt8/

<main class="inline-block-center">  <div>    I'm an element that is block-like with my siblings and we're centered in a row.  </div>  <div>    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.  </div>  <div>    I'm an element that is block-like with my siblings and we're centered in a row.  </div></main>

<main class="flex-center">  <div>    I'm an element that is block-like with my siblings and we're centered in a row.  </div>  <div>    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.  </div>  <div>    I'm an element that is block-like with my siblings and we'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;}

　垂直置中

　　垂直置中在CSS中有點棘手

　　內嵌元素（inline or inline-*）置中，像文本和連結那樣的？

　　它是一行的嗎？

　　有時侯元素可以表現像垂直置中，只是因為它們有相等的上下padding

.link {  padding-top: 30px;  padding-bottom: 30px;}

如果padding因為某些原因不能用，而且文本不會換行的情況下，你可以使用line-height，讓其與height相等去對齊文本。

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

它是多行的？

　　上下等padding的方式也可以讓多行置中，但是如果這方法沒用，你可以讓這些文字的容器按table cell模式顯示，然後設定文字的vertical-align屬性對齊，就像talbe那樣

　　線上示範： http://jsfiddle.net/ourjs/0fn2u4rc/

<table>  <tr>    <td>      I'm vertically centered multiple lines of text in a real table cell.    </td>  </tr></table><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%;}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）垂直置中?

　　你知道元素的高度嗎？

　　出於很多方面的原因，不知道網頁布局的高度是相當普遍的。

　　但是如果你的布局有一個固定高度，你就可以這樣垂直置中：

.parent {  position: relative;}.child {  position: absolute;  top: 50%;  height: 100px;  margin-top: -50px; /* 如果沒有使用: border-box; 的盒子模型則需要設定這個 */}

　元素的高度是未知的

　　儘管未知，但你仍有可能向上推移50%的寬度

　　線上示範： http://jsfiddle.net/ourjs/9sLf7p56/

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

你可以使用flexbox嗎？

　　這並不奇怪，使用flexbox會容易非常多

<main>   <div>     I'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;}

同時水平和垂直置中

　　元素有固定的寬度和高度

　　如果元素的寬度和高度是固定的，你需要先絕對置中，然後上移和左移50%的寬度即可，這種方案有極好的跨瀏覽器支援。

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

