css各种布局

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布局

 

3、多行布局

1）一侧固定，另一侧自适应

.left {float:left;width:100px;}
.right{margin-left:100px;}

注：IE6会有3px的bug

flex布局：

.parent {display:flex;}
.left{width:100px;}
.right{flex:1;}

　　利用overflow

.left{float:left; width:100px;)
.right{overflow:hidden;}

　　

2)两边固定宽，中间自适应

先上代码：

.left{width:200px;float:left;}
.center{float:left;margin-right:-400px;width:100%;}
.right{float:right;width:200px;}

经过试验，在多个同级浮动元素中，z-index的值一次为,left<.center<right;

因此.center设置的是margin-right；

flex布局直接设置center为flex：1就行了。

 

转载于:https://www.cnblogs.com/Yoriluo/p/7514256.html