CSS 实现 两栏布局、三栏布局，以及常见的水平居中的方法

两栏布局

一般两栏布局指的是：左边一栏宽度固定，右边一栏宽度自适应。

<div class="container">
  <div class="left">固定</div>
  <div class="right">自适应</div>
</div>

方式一：浮动

左边浮动，右边 marigin-left

• 左边：元素宽度设置为 200px，并向左浮动。
• 右边：元素的 margin-left 设置为 200px（避免重叠），宽度设置为 auto（默认为 auto，撑满整个父元素）。

.left {
  float: left;
  width: 200px;
}

.right {
  margin-left: 200px;
  width: auto;
}

方式二：浮动

左边浮动，右边 overflow: hidden; 触发BFC

• 左边：元素设置固定大小，并向左浮动，
• 右边：元素设置 overflow: hidden; 这样右边就触发了 BFC，BFC 的区域不会与浮动元素发生重叠。

.left{
  float: left;
  width: 100px;
 }

 .right{
  overflow: hidden;
 }

方式三：flex 布局

父元素利用 flex 布局，左边固定宽度，右边 flex:1。

.container {
  display: flex;
}
.left {
  width: 200px;
}
.right {
  flex: 1;
}

方式四：利用定位

父元素相对定位，左边绝对定位+固定宽度，右边 margin-left

.container {
  position: relative;
}
.left {
  position: absolute;
  width: 200px;
}
.right {
  margin-left: 200px;
}

方式五；利用定位

父元素相对定位，左边固定宽度，右边绝对定位，left 定位为固定值，其余方向为0

.container{
  position: relative;
}
.left{
  width: 200px;
}
.right{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 200px;
}

三栏布局

三栏布局一般指的：左右两栏宽度固定，中间自适应的布局。

<div class="container">
  <div class="left">left 固定</div>
  <div class="center">center 自适应</div>
  <div class="right">right 固定</div>
</div>

方式一：flex 布局

利用 flex 布局，左右两栏设置固定大小，中间一栏设置为 flex:1。

.container {
  display: flex;
}

.left {
  width: 100px;
  background: tomato;
}

.right {
  width: 200px;
  background: gold;
}

.center {
  flex: 1;
  background: lightgreen;
}

方式二：定位

父元素相对定位
左右两栏设置为绝对定位，
中间设置对应方向大小的 margin 的值。

.container {
  position: relative;
}

.left {
  position: absolute;
  width: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  background: lightgreen;
}

方式三：浮动

利用浮动，
左右两栏设置固定大小，并设置对应方向的浮动。
中间一栏设置左右两个方向的 margin 值，注意这种方式**，中间一栏必须放到最后**

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="center">center 中间一栏必须放到最后</div>
</div>

.left {
  float: left;
  width: 100px;
  background: tomato;
}

.right {
  float: right;
  width: 200px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  background: lightgreen;
}

圣杯布局

圣杯布局，原理是利用父级内边距实现的。

父级元素设置左右的 padding，三列均设置向左浮动，
中间一列放在最前面，宽度设置为父级元素的宽度，
因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。

<div class="container">
  <div class="center">center</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

.container {
  display: flex;
}

.center {
  flex: 1;
}

.left {
  flex: 0 0 200px;
}

.right {
  flex: 0 0 200px;
}

双飞翼布局

原理是，自身 margin 外边距实现的。

双飞翼布局是圣杯布局的优化版，由淘宝UED提出。
左右位置的保留是通过中间列的 margin 值来实现的，本质上来说，也是通过浮动和外边距负值来实现的。

<div class="container">
  <div class="main-content">
    <div class="inner-content">Main Content</div>
  </div>
  <div class="left-sidebar">Left Sidebar</div>
  <div class="right-sidebar">Right Sidebar</div>
</div>

.container {
  overflow: hidden;
}

.main-content {
  float: left;
  width: 100%;
}

.inner-content {
  margin: 0 200px; /* 左右两侧栏的宽度 */
}

.left-sidebar {
  float: left;
  width: 200px;
  margin-left: -100%;
  position: relative;
  left: -200px;
}

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

常见的水平居中方法

主要分为两大类：固定宽高的元素和不需要固定宽高的元素。

固定宽高

方法1：position + margin 负值

由于子元素绝对定位且 top 与 left 都平移了50%，此时元素的左上角在正中心。
因此还需要使用 margin 设置宽高的二分之一，从而达到子元素在父元素中占据垂直居中的位置。

.child {
    width: 200px;
    height: 200px;
    background-color: pink;
  
    position: absolute; /* 父元素需要相对定位 */
    top: 50%;
    left: 50%;
    margin-top: -100px; /* 设为高度的1/2 */
    margin-left: -100px; /* 设为宽度的1/2 */
}

方法2：position + margin: auto + 四个定位属性都为0

如果没有不设置宽度，将会撑满

.child {
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
  
    position: absolute; /* 父元素需要相对定位 */
    margin: auto; /* 关键一步，不可缺少 */
    left: 0; /* 让四个定位属性都为0 */
    top: 0;
    right: 0;
    bottom: 0;
}

未知元素宽高

方法1：设置元素相对父级定位，方式兼容性好，被广泛使用的一种方式。

.child {
    width: 200px;
    height: 200px;
    background-color: pink;
  
    position: absolute; /* 父元素需要相对定位 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 在水平和垂直方向上各偏移 -50=% */
}

方法2：flex 布局居中

垂直居中一个img 简便

#parent {
    width: 300px;
    height: 300px;
    background-color: cornflowerblue;
  
    display: flex; /* 设置外层盒子display为flex */
    align-items: center; /* 设置内层盒子的垂直居中 */
    justify-child: center; /* 设置内层盒子的水平居中 */
}