轻松掌握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>