水平居中

水平居中

1.text-align:center;

1.1文字的居中，如图：



1.2 利用display:inline;或display;inline-block;最常见的运用就导航栏，如图：

<div class="nav">
<ul>
<li><a href="#">项目长长</a></li>
<li><a href="#">项目</a></li>
<li><a href="#">项目短</a></li>
</ul>
</div>

说明：这种运用的情况特征是：每一块的元素的宽是不定，保证结构的灵活性。

1.3 整体居中，但在局部又是朝左朝右，如图：



这种情况，在文章中用的比较多，也是用display：inline-block;

html代码;

<div class="wrap">
<div class="text">
<h2>这不是一段普通的文字</h2>
<h3>独步萧条</h3>
</div>
</div>

css代码：



2.margin：0 auto；

这个基础，此处省略

3.用定位position居中

3.1这种方法在我的垂直居中讲过，利用了margin：auto；,我们看效果，其他就不在累赘了。





3.2这个得知元素的宽度width是多少，利用margin的负值；