CSS如何实现居中

一般来说：居中有水平居中，垂直居中，完全居中

水平居中：

 

1、text-align:center;使内容水平居中

2、margin:0 auto;使块级元素水平居中

 

垂直居中:

 

1、line-height方法

试用于单行文本垂直居中

主要代码：

css：

.box{
       width:200px;
       height:100px;
       line-height: 100px;/*行高要与自身高度一致才能垂直居中*/
   }

html：

 <div class="box">
     <p>line-height</p>
 </div>

使图片或inline-block元素垂直居中

前提是外层的line-hight需要和高度一致，同时为图片或inline-block元素设置 vertical-align: middle;

css：

.box {
      line-height: 500px;
      height:500px;
  }

.box img {
    vertical-align: middle;}

html：

<div class="box">
       <img src="img.png" alt="" />
 </div>

2、使用table方法

使高度可变元素的居中

   css:

.parent {display: table;}
.child {
    display: table-cell;
    vertical-align: middle;
}
html:

<div  class="parent">
    <div class="child">table-cell</div>
</div>

效果图：

3、使用绝对定位方法

绝对定位+margin负值

css：

.parent { position:relative;  }

html：

.child {
    position:absolute;
    height:50px;
    top:50%;
    margin-top:-25px;
}

绝对定位实现垂直居中的第二种方法：

css

.parent {  position:relative;  }

.child {
    position:absolute;
    top:0;
    bottom: 0;
    margin:auto 0;//这里设置了一个上下居中
}

html：

<div  class="parent">

    <div class="child">position:absolute;同时要设置一个相应的margin：auto 0;</div>
</div>


完全居中 = 水平居中 + 垂直居中

以下罗列两个：

1、line-height方法+text-align:center;

css：

.box{
       text-align:center;
       width:500px;
       height:100px;
       line-height: 100px;/*行高要与自身高度一致才能垂直居中*/
   }

html：

 <div class="box">
     <p> line-height +text-align:center实现完全居中</p>

 </div>

2、使用绝对定位 
css

 .parent{ position:relative; }
 .child{
    position:absolute;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
    margin:auto;//同时设置上下左右居中
 }
html:

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

ps：使用css3 transform使得完全居中（但是不建议使用）
css

.parent{  position:relative;  }
.child{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
html

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

同样也能完全居中，在使用transform的时候，需要加上浏览器前缀：谷歌-webkit-transform，火狐-moz-transform