标签：内联 ext translate ddl div line orm table 绝对定位
水平居中
- margin：0 auto大法
.child{ width：100px；margin：0 auto }
注意：子元素要有宽度才可以使用
- display：table大法
.child{ display:table; margin:0 auto; }
- text-align：center大法
普通子元素在父元素中
.parent{ text-align：center }
.child{ display:inline-block }
若父元素内是文字，可以不用以内联块状元素形式展示，因为我觉得文字就带有内联属性
.parent{ text-align：center }
- 绝对定位大法
.parent{ position:relative }
.child{ position:absolute; left:50%; transform:translate(-50%) }
太神奇了！！是呀！！我怎么没想到！！
（1）定位要是absolute（2）移动为-50%，负值
另：
.parent{ position:relative }
.child{ position:absolute; left:50%;margin-left:-元素宽度 } // 必须要知道子元素的宽度
- display：flex大法
css3待续
垂直居中
- vertical-align大法
.parent{ display:inline-block; vertical-align:middle; line-height:200px; }
.parent{ display:table-cell; vertical-align:middle; height:200px; }
vertical-align和line-height（height）更配哦~~
有趣了，控制的是父元素，居中的是子元素
- 绝对定位大法
.parent{ position:relative }
.child{ position:absolute; top:50%; transform:translateY(-50%); }
flex大法
水平垂直居中
几种方式可供参考
方式一：
.parent{display:table-cell;vertical-align:middle;text-align:center;height: 100px;width: 200px;}
.child{display:inline-block;}
方式二：
.parent{ position:relative; }
.child{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
CSS：水平居中、垂直居中
标签：内联 ext translate ddl div line orm table 绝对定位
原文地址：http://www.cnblogs.com/hjqbit/p/6689490.html
