CSS的几种布局实现

左右布局

这个布局比较简单，直接使用float就可以实现

.left {
  height: 100px;
  border: 1px solid red;
  float: left;
  width: 50%;
/* 加上box-sizing是为了整个盒模型宽度计算方便 */
  box-sizing: border-box;
}

.right {
  height: 100px;
  border: 1px solid green;
  float: left;
  width: 50%;
  box-sizing: border-box;
}

左中右布局

• 实现1：使用左右布局的思路实现

.left {
  height: 100px;
  border: 1px solid red;
  float: left;
  width: 30%;
  box-sizing: border-box;
}

.middle {
  height: 100px;
  border: 1px solid yellow;
  float: left;
  width: 30%;
  box-sizing: border-box;
}

.right {
  height: 100px;
  border: 1px solid green;
  float: left;
  width: 30%;
  box-sizing: border-box;
}

• 实现2：使用inline-block+text-align实现

<div class="wrapper">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

<!-- font-size相关的代码是为了去除inline-block元素之间的间隙 -->
.wrapper {
  text-align: center;
  font-size: 0px;
}

.left {
  display:inline-block;
  border: 1px solid red;
  font-size: 14px;
}

.middle {
  display:inline-block;
  border: 1px solid yellow;
  font-size: 14px;
}

.right {
  display:inline-block;
  border: 1px solid green;
  font-size: 14px;
}

水平居中

• 实现1

div {
  /* 必须指定宽度才能生效 */
  width: 100px;
  margin: 0 auto;
}

• 实现2：inline-block+text-align，不在重复
• 实现3：先用margin将div整个移动到页面宽度一般出，再往回移动div宽度一半的距离即可实现水平居中

div {
  height: 100px;
  width: 100px;
  border: 1px solid red;
  margin-left: 50%;
  position: relative;
  transform: translateX(-50%);
}

垂直居中

• 实现1：设置line-height可以实现单行文字的垂直居中
• 实现2：使用vertical-align可以实现内联元素的垂直居中
• 实现3：多行文本可以通过调整padding-top和padding-bottom实现垂直居中
• 实现4：和水平居中实现3是类似的思路，只不过用了绝对定位

<div class="wrapper">
    <div class="inner"></div>
</div>

.wrapper {
  height: 200px;
  border: 1px solid red;
  position: relative;
}

.inner {
  height: 50px;
  width: 50px;
  border: 1px solid blue;
  position: absolute;
  top: 100px;
  transform: translateY(-50%);
}

小技巧

• 一般使用了display: inline-block都要加上vertical-align: top，避免出现奇怪的空隙
• 很多CSS效果都可以使用网上的generator来生成，更加方便