CSS居中及布局

CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。下面详细介绍这几种情况。

水平居中

使用inline-block和text-aligh实现

.parent{text-align: center;} .child{display: inline-block;}

优点：兼容性好；缺点：需要同时设置子元素和父元素

使用margin:0 auto 来实现

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

缺点：需要指定宽度

使用table实现

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

优点：只需要对自身进行设置；

使用绝对定位实现

.parent{position:relative;} /*或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好*/ .child{position:absolute;left:50%;transform:translate(-50%);}

缺点：兼容性差

使用flex布局实现

/*第一种方法*/ .parent{display:flex;justify-content:center;} /*第二种方法*/ .parent{display:flex;} .child{margin:0 auto;}

缺点：兼容性差，大面积布局可能会影响效率

垂直居中

在使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;

/*第一种方法*/ .parent{display:table-cell;vertical-align:middle;height:20px;} /*第二种方法*/ .parent{display:inline;vertical-align:middle;}

vertical-align应用于行内元素和表单元素 使用绝对定位

.parent{position:relative;} .child{positon:absolute;top:50%;transform:translate(0,-50%);}

使用flex实现

.parent{display:flex;align-items:center;}

水平垂直全部居中

均需设置宽、高 利用vertical-align,text-align,inline-block实现

.parent{display:table-cell;vertical-align:middle;text-align:center;} .child{display:inline-block;} .parent{position:relative;} .child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} .parent{display:flex;justify-content:center;align-items:center;}

多列布局

左列定宽，右列自适应

利用float+margin实现

.content{height: 200px;border: 1px dotted black;overflow: hidden;} .left{border: 1px solid green;width:200px;height: 200px;float: left;} .right{border: 1px solid red;margin-left:300px;height: 200px;} //需要注意的是，左列设置左浮动，右列不设置浮动，通过margin来实现与左列的距离。

利用float+margin(fix)实现

<div class="content"> <div class="left"></div> <div class="rightBox"> <div class="right"></div> </div> </div> //不理解为什么添加一个父级元素并设置她的width 100%，并设置一个负margin会有用。 .content{height: 200px;border: 1px dotted black;overflow: hidden;} .left{border: 1px solid green;width: 200px;height: 200px;float: left;} .rightBox{width: 100%;margin-left: -300px; float: right;border: 3px solid maroon;} .right{border: 1px solid red;margin-left:300px;height: 200px;}

使用float+overflow实现

.content{height: 200px;border: 1px dotted black; overflow: hidden;} .left{border: 1px solid green;width: 200px;height: 200px;float: left;} .right{border: 1px solid red;overflow:hidden;margin-left:300px;height: 200px;}//这里设置右边自适应部分是overflow：hidden，默认的情况右边自动填充余下的部分，如果想让左右两边有间隔的话，需要设置margin-left：300；需要加上左边的部分和间隔的部分。

overflow:hidden，触发bfc模式，浮动无法影响，隔离其他元素，IE6不支持，左侧left设置margin-left当作left与right之间的边距，右侧利用overflow:hidden 进行形成bfc模式 如果我们需要将两列设置为等高，可以用下述方法将“背景”设置为等高，其实并不是内容的等高

.content{overflow: hidden;height: 200px;} .left{border: 1px solid green;width: 100px;float: left;} .right{border: 1px solid red;overflow: hidden;} .left,.right{height:200px;padding-bottom: 9999px;margin-bottom: -9999px;}

使用table实现

.content{display:table;table-layout:fixed;height:200px;width:100%;border: 1px solid green;} .left{border: 1px solid red;width: 100px;height: 200px;} .left,.right{display: table-cell;border: 2px solid black;height: 200px;}

使用flex实现

.content{display:flex;height:200px;width:100%;border: 1px solid green;} .left{border: 1px solid red;width: 100px;height: 200px;} .right{border: 2px solid black;height: 200px;flex: 1;}

两列定宽，一列自适应

.content{display:flex;height:200px;width:100%;border: 1px solid green;} .left1,.left2{border: 1px solid red;width: 100px;height: 200px;} .right{border: 2px solid black;height: 200px;margin-left: 400px;}

方法与上面差不多

两列定宽，中间自适应