水平垂直居中

方法一：单行文字

height:50px;
line-height:50px;
text-align:center;

方法二：绝对定位

父元素{
  position:relative;  
}
子元素{
  position:absolute;
  left:50%;
  top:50%;
  width:value;
  height:value;
  margin-left:value/2;
  margin-top:-value/2;  
}

缺点：子元素被固定死，width和height必须设置

方法三：绝对定位 (IE6和IE7不支持）

父元素 {
  position:relatve;
}
子元素{
  position:absolure;
  width:value;
  height:value;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}

缺点：子元素被固定死，width和height必须设置。

方法四：绝对定位（IE6不支持）

父元素 {
  position:relative;
}
子元素 {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:value;
}

缺点：需要设置margin的外边距，上下相等，左右相等。

方法五：display:table-cell显示为单元格的方法（IE6和IE7不支持）

父元素{
  display:table-cell;
  text-align:center;
  vertical-align:middle;  
}

布局：

    <div class='wrap'>
        <span class='innerwrap'>
            CSS制作水平垂直居中对齐
        </span>
    </div>

 

样式：

    <style type="text/css">
    .wrap {
        width: 300px;
        height: 300px;
        border:1px solid red;
        display: table-cell;
        vertical-align: middle;
        text-align: center;

    }
    .innerwrap {
        background: red;
    }
    </style>

 

方法六：针对方法五的改进，兼容所有浏览器（即三层嵌套：相对定位-->绝对定位-->相对定位）

布局：

    <div class="box"> 
         <div class='wrap'> 
             <div class='innerwrap'> CSS制作水平垂直居中对齐 </div>
         </div>
     </div>

样式：

    <style type="text/css">
        .box {
            position: relative;
            display: table;
            width: 300px;
            height: 300px;
            border:1px solid red;
        }
        .wrap {
            display: table-cell;
            vertical-align:middle;
            text-align: center;
            *position: absolute;
            *top:50%;
            *left: 50%;
            *white-space: nowrap;  /*因为没有设置宽度，父元素容量太小而子元素文字太宽，产生文字换行的情况*/
        }
        .innerwrap {
            background: red;
            *position: relative;
            *top:-50%;
            *left: -50%;
        }
    </style>

方法七：针对方法五改进的，增加一个空标签，并设置height:100%，width:1px，然后display:inline-block并vertical-align:middle

 布局：

    <div class='wrap'>
         <!--[if lte IE 7]> 
             <span></span> 
         <![endif]--> 
         <div class='innerwrap'> CSS制作水平垂直居中对齐 </div>
     </div>

样式：

    <style type="text/css">
        .wrap {
            width: 300px;
            height: 300px;
            border:1px solid red;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            }
        .innerwrap {
            background: red;
            }
    </style>
    <!--[if lte IE 7]>
        <style type="text/css">
            span {
                height: 100%;
                width: 1px;
                background:green;
                display: inline-block;
                vertical-align:middle;
            }
            .innerwrap {
                display: inline;
                zoom:1;
                /*
                   因为是块形元素，所以使用display:inline,zoom:1的方法，
                   如果是行内元素，直接dispay:inline-block即可。
                   不明白，可以搜索display:inline-block的前世今生。
                */
                vertical-align:middle;
            }
        </style>    
    <![endif]-->

方法八：flex+margin方法（chrome和FF支持）

父元素 {
   display:flex;
}
子元素 {
  margin:auto;
}

方法九：flex方法（chrome、FF、IE10支持）

父元素 {
  display:flex;
  justify-content:center; /*水平方向*/
  align-items:center;/*垂直方向*/
}

 方法十：transform:translate(IE9支持）

子元素 ｛

       position:absolute;
       left:50%;
       top:50%;
       transform:translate(-50%, -50%); 

｝