css居中思路整理

1、水平居中

      text-align：若子元素不受float影响，将块级父元素设为text-align:center可使子元素水平居中

      width：xx；margin:0 auto。 若子元素不受float影响，如此设置子元素可使子元素水平居中

2、垂直居中

设置到父元素上，line-height=height可使内部文字垂直居中

3、通用方法

首先给父元素写上positon:relative，这么做是为了给子元素打上position:absolute的时候不会被定位到外太空去。接下去，写上子元素的height和width，这个似乎是必须的，某些浏览器在解析的时候如果没有这2个值的话会出现意想不到的错位。

接着就是整个方法的核心，给子元素再打上top:50%;left:50%以及margin-top:一半的height值的的负数;
margin- left:一半的weight值的负数。整理一下之后，可能你会给你的子元素写上这样的css（当然，父元素也要先写上width和height）

{width:100px;height:80px;position:absolute;top:50%;left:50%;margin-left:50px;margin-top:40px}

接下去就刷新页面吧，你的子元素已经是居中显示了。

使用这个方法的好处在于无论你是什么形式的内容都可以马上居中，而缺点就是必须对元素有确定的宽高值，否则的话可能就需要通过javascript来进行一些小计算了。