一.元素的水平居中：

1,文字的水平居中：text-align：cente

<span style="color:#000000;">div.txtCenter{
	text-align:center;
    border:1px solid red;
    margin:20px;

}
</span>

<span style="color:#000000;"><div class="txtCenter">我是文字，哈哈，我想要在父容器中水平居中顯示。</div></span>

結果：
<img src="https://img-blog.csdn.net/20160321144458996?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

2,<span style="color:#FF0000;"><strong>已知寬度</strong></span>的塊元素居中：


 div{
	width:500px;
 margin:20px auto ;
    text-align:center;
 }
 <div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div>

 

結果：

例子中的text-align：center控制了該div 的文字也居中；

3，未知寬度的塊元素水平居中方式：

(1).設定display：table，margin：0 auto

.wrap{
    display:table;
    margin:0 auto;
    background:#ccc;電風扇
}
<div class="wrap">
  設定我所在的div容器水平居中  
</div>

(2).設定display：inline，text-align：center

.container{text-align:center;}
.container ul{list-style:none;margin:0;padding:0;display:inline;}
.container li{margin-right:8px;display:inline;}
div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
 

(3).通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left:-50% 來實現水平居中。

.container{
    float:left;
	position:relative;
	left:50%
}

.container ul{
	list-style:none;
	margin:0;
	padding:0;
	
	position:relative;
	left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
<div class="container">
    <ul>
    	<li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
 

結果：

</pre><h1>二.元素的垂直居中：</h1><p>1，<span style="color:#B22222;"><strong>父元素高度確定的單行文字：<span style="color:#000000;">設定來height=line-height:即可</span></strong></span></p><p><span style="color:#B22222;"><strong><span style="color:#000000;"></span></strong><span style="color:#000000;"></span></span></p><pre name="code" class="html"><span style="color:#B22222;"><span style="color:#000000;">.wrap h2{
    margin:0;
    height:100px;
    line-height:100px;
    background:#ccc;
}
<div class="wrap">
    <h2>hi,imooc!</h2></span></span>

2，垂直居中，父元素高度確定的多行文字 ：display:table-cell ,vertical-align:middle

.container{
    height:300px;
	background:#ccc;
	
	display:table-cell;/*IE8以上及Chrome、Firefox*/
	vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>

 html, body
      {
          width:100%;
          height:100%;
      }
      #one
      {
          position: absolute;
          top:50%;
          left:50%;
          height:auto;
          width:auto;
      }
      .pa
      {

          height:400px;
          width:200px;
          left:-200px;
          top:-200px;
          border:1px solid black;
          background-color:greenyellow ;

      }
<div class="pr" id="one">

    <div class="pa pa1">#one的子元素pa1，相對#one絕對定位，#one是它的父元素，與.pa2為同級兄弟元素</div>

</div>