水平居中與垂直居中

水平居中

text-align:center

• 單行文本居中

<div class='box'>
   hello你好
</div>

.box{
    text-align: center;
}

• 單行文本和a鏈接

<div class='box'>
  hello
  <a class='bt'>點我</a>
</div>

.box{
  border: 1px solid red;
 text-align: center;
}
.bt{
  padding: 3px;
  color:#fff;
}

padding:3px的話按鈕會超出border,因為上下padding的背景會占用，但內容不變，如果想要按鈕在邊框里面，只需設置inline-block。

• 兩個按鈕居中

<div class='box'>
  <a class='bt'>點我</a>
  <a class='bt'>點我</a>
</div>

.box{
  text-align: center;
}
.bt{
  display: inlie-block;
}

• 圖片也是text-align:center;

塊級元素居中

因為塊級元素本身就是占滿一行的所以，無所謂居中不居中，一般說的塊級元素居中指的是有固定寬度的元素。只需margin:0 auto+固定寬度

垂直居中

第一種思路

• 一般高度是由內容撐開的，所以只需要padding-top=padding-bottom就行了
• 單行文字/按鈕，在本元素上加height=line-height當然也可以用上面的方法。

第二種思路

• 內聯元素

1. 外部的div如果是固定的寬度，則直接寫line-height=高度
2. 如果高度不是固定的則直接寫上下padding相等。

• 塊級元素
  上下padding相等或者line-height=height
  以上這種常規的寫法可以滿足60%的需求。
  脫離文檔流的元素都是塊級元素，即使span元素。并且定位后才能用z-index。
• 浮動元素居中
  浮動元素不可能居中。
  如果發現把浮動元素居中則需求有問題，此時應該去掉浮動用inline-block元素。
• 絕對定位元素居中

1. 固定寬高元素絕對定位
2. 不固定寬高
   固定寬高絕對定位
   .element{
   width: 600px;
   height: 400px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-top: -200px;
   margin-left: -300px;
   border: 1px solid;
   }
   不固定寬高
   css3中的transform
   .box{
   position: absolute;
   border: 1px solid black;
   width: 300px;
   padding: 10px;
   left: 50%;
   top: 20%;
   box-sizing: border-box;
   transform: translate(-50%,-20%)
   }
   margin:auto實現絕對定位元素的居中

.element{
  width: 600px;
  height: 400px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}