CSS 布局与居中

一、左右布局

1. inline-block
display:inline-block属性是介于行级元素(display:inline)和块级元素(display：block)之间的属性，它可以像行级元素一样水平布局，也可以像块级元素设置宽高属性，所以可以进行左右布局。

.left,
.right {
  display:inline-block;
}

2. float实现左右布局
float浮动，将该块状区域脱离父级标签的文档流，left属性值使该区域向父级标签区域的左侧边界放置，right属性值使该区域块向父级标签的右侧边界放置，如是利用该属性可以实现左右布局。

    
左边
    
右边
  


.left {
  float: left;
}

二、左中右布局

1. 绝对定位
左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。div顺序没有要求。

html,body{
margin:0; 
height:100%;
}
.left,
.right{
position:absolute; 
top:0;
width:20px;
height:100%;
}
.left{
left:0; 
background:#a0b3d6;
}
.right{
right:0; 
background:#a0b3d6;
}
.middle{
margin:0 20px; 
background:#ffe6b8; 
height:100%;
}

2. 使用自身浮动
对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。同时父盒子设置 overflow: auto; 来避免子盒子溢出

  
a
  
a
  
a



body {
  width: 300px;
  height: 30px;
  overflow: auto;
}
.left {
  width: 100px;
  height: 30px;
  float: left;
  background: #a0b3d6;
}
.right {
  width: 100px;
  height: 30px;
  float: right;
  background: #a0b3d6;
}
.middle {
  width: 100px;
  height: 100%;
  margin: 0px 100px;
  background: #555;
}

3.圣杯布局
圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合。

  

    

  
  

  




html,
body {
  margin: 0;
  height: 100%;
}
.middle {
  width: 100%;
  height: 100%;
  float: left;
}
.zz {
  margin: 0 210px;
  background: #ffe6b8;
  height: 100%;
}
.left,
.right {
  width: 200px;
  height: 100%;
  float: left;
  background: #a0b3d6;
}
.left {
  margin-left: -100%;
}
.right {
  margin-left: -200px;
}

三、 水平居中

1. 对于行内元素(inline)：text-align: center;
2. 对于块级元素(block)：通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。
3. 对父元素设置 text-align: center;
4. 对子元素设置 display: inline-block;（vertical-alinga:top）
5. 或者使用 flex 布局flex 布局： display:flex； justify-content:center

四、 垂直居中

1. 单行内联(inline-)元素垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。
2. 多行元素垂直居中
利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。
3. 块级元素垂直居中
3.1 固定高度的块级元素
通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。
3.2 未知高度的块级元素
当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。

五、 CSS小技巧

box-sizing
当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。
百分比宽度
百分比是一种相对于包含块的计量单位。它对图片和盒子模很有用：比如实现图片宽度始终是容器宽度的50%，即使窗口缩小。
inline-block 布局
inline-block 元素 影响垂直居中，加vertical-align：top。