CSS 控制元素 上下左右居中

 此文章为转载，目的是自己好参考

左右居中: 

　　#method.

　　　　-->. margin:0 auto; 

 

 

效果图：

 

 

上下居中： 

　　在介绍方法之前，我先声明一下， 这里的 上下居中法，都是已知 height的，总结分两种情况，1. 具体height 和 2.百分比height，但无论哪种形式的height，应该都可以归为 已知height。 下面说一说，百分比height 的两种需要注意的情景：

　　情景一：position:absoute; top:0; left:0; width:xx%;height:xx%; 　(position:absolute;-->生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。) 　所以，它的百分比height = 相对于 static 定位以外的第一个父元素的height;

　　情景二：position:fixed; top:0;left:0;width:xx%;height:xx%;　　　  (position:fixed;-->生成绝对定位的元素，相对于浏览器窗口进行定位。)　　　　　　　　　　　　  所以，它的 百分比height = 相对于浏览器窗口高度的height;

　　通过以上的 声明分析，我总结的 上下居中，总体上分为 四种方法，针对 两种场景：

　　两种场景：

　　　　　　　　1. 未脱离文档流 定位的元素（position：static || relative）

　　　　　　　　2. 脱离文档流  定位的元素（position: absolute || fixed）

　　ok,该了解的都了解了，下面进入正题，介绍方法。

 

　　  #Method1.  

　　　　-->. 子容器绝对定位，top:0，bottom:0，margin:auto

　　　　即，父元素 用相对定位, 子元素 用绝对定位(relative --> absolute)，上代码：

　　　　-->. 优点：设置起来比较简单，使用范围较广；

　　　　-->. 缺点：需要子容器有一个固定的高，或百分比自适应于外部。它的高度不能是height:auto； 兼容性 IE8+；

　　　　

 

 

 

效果图：

 

　　#method2.

　　　　-->. 子容器相对定位，top:50%，translateY(-50%)

　　　　即，父元素 用相对定位，子元素 用相对定位(relative --> relative)，上代码：

　　　　-->. 优点：只设置子元素的属性即可，无需过多计算；

　　　　-->. 缺点：应用到了CSS3的translateY,所以 兼容性 IE9+；

 

 

 

效果图：

 

 

　　#method3.

　　-->. 子元素1：float, 子元素2：clear:both;  floter元素的margin-bottom值 = content的height的值的负一半

　　-->. 优点：position:relative;时，无需声明 父元素的定位

　　-->. 缺点：需要一个同子元素 同级的 float元素辅助；需要手动计算 float元素的 margin-bottom 的值；

 

 

　　

 效果图：

 

　　#method4.

　　　　-->. 子元素绝对定位，top:50%; margin-top:-(自身高度的一半)；

　　　　-->. 优点：只操作子元素的css属性，较为简单

　　　　-->. 缺点：子元素 和 父元素都需要设置position；需要手动计算 margin-top 的值；

 

 

以上文章参考地点：http://www.cnblogs.com/cnblogs-jcy/p/6074899.html