css不定宽块级元素居中方法三

上一节介绍了不定宽块级元素居中的第二种方法，设置display:inline;这一种方法的缺点就是使得元素丧失了一些特性，例如不能设置高度，宽度等。

那这一节就介绍不定宽块级元素居中的第三种方法.

第一步：父元素设置float:left;position:relative;left:50%;

第二步：元素设置position:relative;left:-50%;

html关键代码

<div>

    <p>不定宽块级元素居中第三种方法</p>

</div>

css关键代码

<style>

    div{

        float:left;

        position:relative;

        left:50%

     }

    p{

        position:ralative;

        left:-50%;

    }

</style>

相比前两种方法，这一种方法不会产生多余的标签，也不会使元素inline化，但是它使元素变成了相对定位，在网页布局中会产生其它副作用，例如元素错位。

css中元素的横向居中就总结到这里，纵向居中将在下一节介绍。

欢迎转载，请注明出处！