讨论CSS中的各类居中方式

今天主要谈一谈CSS中的各种居中的办法。
首先是水平居中，最简单的办法当然就是

margin:0 auto;

也就是将margin-left和margin-right属性设置为auto，从而达到水平居中的效果。

那么其他的办法呢？容我一一道来：

line-height

首先介绍文字的水平居中方法：

<div class="wrap">刘放</div>

利用line-height设为height的一样即可：

.wrap{
line-height: 200px;/*垂直居中关键*/
text-align:center;

height: 200px;

font-size: 36px;
background-color: #ccc;
}

padding填充

利用padding和background-clip配合实现div的水平垂直居中：

<div class="parent">
<div class="children"></div>
</div>

通过backgroun-clip设置为content-box,将背景裁剪到内容区外沿，再利用padding设为外div减去内div的差的一半，来实现：