CSS水平居中一个不确定宽度的区块

我们知道，如果要一个区块水平居中，最好的办法是设置其width，然后使用margin左右为auto，但是对于一个不确定宽度的区块，我们也想要水平居中该怎么办，其实可以设置其display为table，然后设置左右的margin为auto，不过ie6,7不支持display: table;除此之外我们还可以用css3的box-align和box-pack来实现，当然那更不兼容了

CSS:

.element{

  display: table;

  margin: 0 auto;

}

因为不兼容，我们得想一个兼容的办法啊，那就是直接用table来构造喽

<table class="centered-block">

    <tbody>

        <tr>

            <td>

                <div>我是需要水平居中的东西</div>

            </td>

        </tr>

    </tbody>

</table>

.centered-block{

  margin-left: auto !important;

  margin-right: auto !important;

}

此外 再介绍一段兼容各种浏览器的水平和垂直居中的CSS代码

兼容各种浏览器的水平和垂直居中的CSS代码，这段代码可以用于宽度和高度不固定的div

<figure class='logo'>

    <span></span>

    <img class='photo'/>

</figure>

.logo {

  display: block;

  text-align: center;

  display: block;

  text-align: center;

  vertical-align: middle;

  border: 4px solid #dddddd;

  padding: 4px;

  height: 74px;

  width: 74px; }

  .logo * {

    display: inline-block;

    height: 100%;

    vertical-align: middle; }

    .logo .photo {

    height: auto;

    width: auto;

    max-width: 100%;

    max-height: 100%; }