html元素水平居中

转载的：http://www.voidcn.com/article/p-wmdxyijd-bpm.html

一、行内元素水平居中

方法：如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

如下：

<body>
<div class="center"><span>行内元素在父容器中水平居中显示。</span></div>
</body>
<style>
div{
    border:1px solid ;
    margin:20px;
}
.center{
    text-align:center;
}
</style>

二、块状元素水平居中

当被设置元素为块状元素时，text-align:center 就不起作用了，此时分两种情况：定宽块状元素和不定宽块状元素。

1、定宽块状元素（块状元素的宽度width为固定值）

方法：满足定宽和块状两个条件的元素可以通过设置“左右margin”值为“auto”来实现居中

如下：

<body>
<div>定宽块状元素水平居中。</div>
</body>
<style>
div{
    border:1px solid red;
    margin:20px auto;
    width:200px;/*宽度为固定值，不能写百分比*/
}
</style>

2、块状不定宽元素

方法：

①设置 margin:0 auto;  display:table;

②设置display:inline方法。改变块级元素的display为inline类型（设置为行内元素显示），然后使用text-align:center来实现居中效果

③设置position:relative;left:50%，利用相对定位的方式，将元素向左偏移50%。通过给父元素设置float，然后给父元素设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中

方法①如下：

<div class="wrap">
  不定宽块状元素水平居中  
</div>
.wrap{
    background:#ccc;
    margin:0 auto;
    display:table;
}

方法②如下：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

<style>
.container{text-align:center;}
.container ul{list-style:none;margin:0;padding:0;display:inline;}
.container li{margin-right:8px;display:inline;}
</style>

方法③如下：

<div class="wrap">
    <div class="wrap-center">不定宽块状元素水平居中。</div>
</div>
.wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;
    
}
.wrap{
    float:left;
    position:relative;
    left:50%;
    
}