元素的水平居中，垂直居中以及同时水平，垂直居中方法

一.元素的水平居中：

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>

结果

3. 块元素既垂直居中，又水平居中：父元素设置：position：absolute，left：50%，top：50%，子元素设置position：relative，left：-（子元素宽度的一半），top：-（子元素宽度的一半）；

 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>