css各种布局

标签：移动   log   调整   highlight   idt   移动端   middle   nil   比较   

1、水平居中

前提：父容器.parent 和子容器.child

1)使用text-align和inline-block

.parent{text-aling:center};
.child {display:iniline-block};

特点：兼容性好，不过需要设置父子元素；

2）margin：0 auto；

.child {width:200px;margin: 0 auto;}

　　特点：兼容性好，不过需要设置宽度；

3）table+margin:0 auto;

.child {display:table; margin:0 auto;}

　　特点：只对子元素设置，不过针对IE6、7需要调整结构（不推荐）

4）绝对定位

.child{position:absolute; left:50%; transition:translate(-50%);

特点：兼容性比较差，一般IE9以上

5）flex布局

.parent {display:flex; justify-content:center;}　

特点：兼容性差，移动端可使用

2、垂直居中

 1）vertical-align（注：只依赖于inline-block，table-cell也属于inline-block）

.parent { display:inline-block; vertical-align:middle;height:200px;}

2)使用绝对定位

3）使用flex布局

css各种布局

标签：移动   log   调整   highlight   idt   移动端   middle   nil   比较   

原文地址：http://www.cnblogs.com/Yoriluo/p/7514256.html