CSS中的各种居中方法

介绍css中的垂直居中和水平居中的方法

文字居中

对于单行文字居中，比较简单设置:

<style>
.content{
text-align:center;
height:100px;
line-height:100px;
}
</style>

多行文字居中

设置包含文字元素的宽高，然后使用绝对定位；
适用于子元素知道宽高的，不止是文字，其他块级元素也可以。

<style>
.wrapper{
    width:300px;
    height:300px;
    border:1px solid black;
    position:relative;
}
.content{
   height:100px;
   width:1px solid black;
   postion:absolute;
   top:50%;
   margin-top:-50px;
   left:50%;
   margin-left:-50px;
}
</style>
<div class="wrapper">
    <p class="content">居中的文字</p>
</div>

无宽高图片居中

无宽高的行内元素要居中，就有点麻烦了
下面介绍几种方法：

1. 使用绝对定位+margin
   这种方法的原理是，设置子元素为绝对定位，距离父元素上下左右都为0；如果距离不够，自动用margin补充。

<style>
#wrapper{
    position: relative;
    background: gray;
    width: 800px;
    height: 800px; 
    }
         
img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    }
</style>

1. button居中法
   button内容默居中的，所以可以利用这一属性来居中内容
   这个方法兼容性良好，但是需要禁用Butotn的默认点击事件

<style>
 .box {
    width: 450px;
    height: 450px;
    border: 1px solid;
    background: #333;
    position: relative;
    }
button {
    width: 450px;
    height: 450px;
    border: 1px solid #fff;
    background: none;
}

</style>
<div class="box">
<button disabled="true"><img src="1.png" alt=""></button>
</div>

1. display:table-cell方法
   设置父元素的 dispaly,但是这个方法有个问题，table-cell需要在标准文档流中才有效，所以如果父元素设置为absolute 或者float之后，此方法无效，另外，兼容性也有问题，IE6、7 并不支持这个样式。

   <style>
    .box {
       width: 450px;
       height: 450px;
       border: 1px solid;
       background: #333;
       position: relative;
       display:table-cell;
       vertical-align: middle;
       text-align: center; 
       }
       
   </style>
   <div class="box">
   <img src="1.png" alt="">
   </div>

定宽块状元素居中

满足定宽（块状元素的宽度width为固定值）和块状两个条件的元素可以通过设置“左右margin”值为“auto”来实现居中。