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; /* 设置内层盒子的水平居中 */
}