輕鬆掌握CSS的各種居中效果

個人建議：不論是學css還是其他，遇到屬性、方法之類的問題，先看官方文檔。如果看不懂，再看別人的博客。

關於position的屬性有哪些，官文是這樣的：

這裏有一個值得注意的點是absolute屬性，就是說使用該屬性的元素會被定位在相對於第一個父元素的位置，而fixed是定位在相對於瀏覽器的位置。兩者的區別在於，當使用absolute的元素與使用fixed的元素定位在同一位置時，如果網頁滾動，那麼fixed的元素不會有任何變化，而absolte元素會被滾走。如下圖

接下來使用position屬性來實現各種居中效果：

一、屏幕的各種居中

1、屏幕左上方

.parent{
      position: absolute;	//可加可不加
      background: #FF5722;
      width: 300px;
      height: 300px;
    }
    <div class="parent"></div>

2、屏幕中上方

.parent{
      position: absolute;	
      left: 50%;
      margin-left: -150px;	//寬度的1/2
      background: #FF5722;
      width: 300px;
      height: 300px;
    }
    <div class="parent"></div>

3、屏幕右上方

.parent{
      position: absolute;	
      right: 0;
      background: #FF5722;
      width: 300px;
      height: 300px;
    }
    <div class="parent"></div>

4、屏幕中左方

.parent{
      position: absolute;	
      top: 50%; 
      margin-top: -150px;	//高度的1/2
      background: #FF5722;
      width: 300px;
      height: 300px;
    }
    <div class="parent"></div>

5、屏幕最中央

.parent{
      position: absolute;	
      top: 50%; 
      left: 50%;
      margin-top: -150px;	//高度的1/2
      margin-left: -150px;	//寬度的1/2
      background: #FF5722;
      width: 300px;
      height: 300px;
    }
    <div class="parent"></div>

6、屏幕中右方

.parent{
      position: absolute;	
      top: 50%; 
      right: 0;
      margin-top: -150px;	//高度的1/2
      background: #FF5722;
      width: 300px;
      height: 300px;
    }
    <div class="parent"></div>

7、屏幕左下方

.parent{
      position: absolute;	
      bottom: 0; 
      background: #FF5722;
      width: 300px;
      height: 300px;
    }
    <div class="parent"></div>

8、屏幕中下方

.parent{
      position: absolute;	
      bottom: 0; 
      left: 50%;
      margin-left: -150px;	//寬度的1/2
      background: #FF5722;
      width: 300px;
      height: 300px;
    }
    <div class="parent"></div>

9、屏幕右下方

.parent{
      position: absolute;	
      bottom: 0; 
      right: 0;
      background: #FF5722;
      width: 300px;
      height: 300px;
    }
    <div class="parent"></div>

二、容器內的給中居中

原理是一樣的，以下就直接上代碼了

  <style>
    .parent{
      position: absolute;
      top: 50%; 
      left: 50%;
      margin-left: -150px;
      margin-top: -150px;
      background: #FF5722;
      width: 300px;
      height: 300px;
    }

    .item-1{
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 50px;
      background: #000;
    }

    .item-2{
      position: absolute;
      top: 0;
      right: 0;
      width: 50px;
      height: 50px;
      background: #000;
    }

    .item-3{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 50px;
      height: 50px;
      background: #000;
    }

    .item-4{
      position: absolute;
      bottom: 0;
      right: 0;
      width: 50px;
      height: 50px;
      background: #000;
    }

    .item-5{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50px;
      height: 50px;
      margin-left: -25px;
      margin-top: -25px;
      background: #000;
    }

    .item-6{
      position: absolute;
      top: 0;
      left: 50%;
      width: 50px;
      height: 50px;
      margin-left: -25px;
      background: #000;
    }

    .item-7{
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 50px;
      height: 50px;
      margin-left: -25px;
      background: #000;
    }

    .item-8{
      position: absolute;
      top: 50%;
      left: 0;
      width: 50px;
      height: 50px;
      margin-top: -25px;
      background: #000;
    }

    .item-9{
      position: absolute;
      top: 50%;
      right: 0;
      width: 50px;
      height: 50px;
      margin-top: -25px;
      background: #000;
    }
  </style>

<div class="parent">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
  <div class="item-4"></div>
  <div class="item-5"></div>

  <div class="item-6"></div>
  <div class="item-7"></div>
  <div class="item-8"></div>
  <div class="item-9"></div>
</div> 

需要注意的是，當使用absolute屬性時，margin: auto屬性會失效，所以在上面的代碼中，使用了top，margin-top等屬性進行替換。
在不使用absolute的情況下，實現屏幕的上方居中頁可以是這樣的

.parent{
	margin: auto;
      background: #FF5722;
      width: 300px;
      height: 300px;
}

<div class="parent"></div>