CSS样式小技巧

1.水平居中设置

①行内元素（内联元素）

是通过对父元素设置text-align:center来实现的。

举个例子：

div{border:1px solid red;}

.txtCenter{text-align:center;}

<div class="txtCenter">你说前半生就这样吧</div>       在这里，div是父元素，文本是子元素

效果如下：

②定宽块状元素（宽度width为固定值）

通过将margin的left和right的值设置为auto来实现。

举个例子：

div{

border:1px solid pink;

width:300px;

margin:10px auto;

}

<div>你说前半生就这样吧</div>

③不定宽块状元素

方法一：为要设置居中的元素外面加一个table标签（tbody、tr、td都要有），然后在<style>中table{margin:0 auto;}来实现。

举个例子：

table{margin:0 auto;}

<table>

<tbody>

<tr><td><div>你说前半生就这样吧</div></td></tr>

</tody>

</table>

方法二：改变块状元素的display为inline（设置为行内元素显示），然后使用text-align:center来实现居中。

举个例子：

.one{
    border:1px solid red;
    text-align:center;
}
.two{
    border:1px solid green;
    display:inline;
}

<div class="one">
    <div class="two">
        你说前半生就是这样吧
    </div>
</div>

方法三：给父元素设置：float:left、position:relative、left:50%，给子元素设置：position:relative、left:-50%来实现居中。

举个例子：

.wrap{
    float:left;
    position:relative;
    left:50%;
    border:1px solid red;
}
.wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;
    border:1px solid green;
}

<div class="wrap">
    <div class="wrap-center">你说前半生就这样吧</div>
</div>

这个方法就是：

他先把父元素通过float:left移动到了网页的左边，然后给他弄了相对定位，之后，又把他往右移动了50%。就是，比如说网页中间有条中分线，这个时候，这个父元素已经到了中分线的右边并且贴着中分线了。

然后他给子元素设置了相对定位。然后给他设定了left:-50%，因为子元素是在父元素之内的，所以这个-50%等于说，把他从父元素的左边又向左拉了50%。那么，这时候，子元素的一半在中分线的左边，另一半在中分线的右边，就实现了居中！