浅谈CSS中的居中

最近人自己在写移动端的页面，尽管自己很业余，但是也要总结下。

这个页面改了三次，现在想想我也是跪了。现在也许还是不完美，但是至少看得过去了。

 

那么我们开始CSS中的居中，我就讲讲例子和方法，道理网上这方面很多。

第一点：怎么居中？

经验就是分清行内元素还是块级元素。具体百度吧。我这里讲讲居中的原理也是按照两种来区分。

行内元素：

水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。这个是很重要的。

<div class="c-div">
　　<span class="c-span">
　　行内居中
　　</span>
</div>

.c-div{width:100%;height:200px;background:#DADADA;}

接下来：span是行内元素，怎么居中？

水平方向：padding-left、padding-right、margin-left、margin-right都可以用，但是在这里的话，只能用外边距margin-left、margin-right，这个值的话，怎么确定？如果行内元素的宽度确定，那么值的话，很容易确定。其实这个是一个很差的方法。在这里我又想到了css3中的一个新的东东，calc这个。其实只要想想span是行内元素，那么父级肯定是block元素，明白了这点就很简单了。我们想想块级元素在水平方向是怎么居中的？一想事情就不是简单了。text-align:center; 不就解决了。

.c-div{text-align:center; }

垂直方向：想想垂直方向，行内元素，我就想到了：line-height:200px;一下子问题就解决了。

.c-span{color:#ff0000;line-height:200px;}

块级元素：

水平方向：

<div class="c-div2">
　　行内居中
</div>

想想这个不就是很简单：

.c-div2 {width:100%;height:200px;margin-top:15px;background:#DADADA;text-align:center; vertical-align:middle;line-height:200px;}

好了

第二点：有哪些居中？

仔细的想想，居中有好几种方法。

absolute方法：当position为absolute时，那么怎么居中？当然是：top,left,right,bottom来确定。

下班了，想想不想写了，下次吧