HTML+CSS的两栏、三栏布局以及垂直居中的实现方式

• grid实现方式

.container {display: grid;grid-template-columns: 300px auto 100px;//列的宽度}.main {grid-row: 1;//第几行background-color: #554;}.left {grid-row: 1;//第几行background-color: #5616;}.right {grid-row: 1; //第几行background-color: #438;}

• 圣杯布局

.container {padding: 0 100px 0 300px;overflow： hidden;}.main {float: left;width: 100%;background-color: #554;}.left {position: relative;float: left;width: 300px;left: -300px;margin-left: -100%;background-color: #5616;}.right {position: relative;float: left;right: -100px;margin-left: -100px;width: 100px;background-color: #438;}

• 双飞翼布局

<div class="container"><div class="wrap"><div class="main">Lorem ipsum dolor sit amet</div></div><div class="left">Lorem ipsum dolor sit amet</div><div class="right">Lorem ipsum dolor sit amet</div></div>div {height: 200px;color: #fff;}.wrap {float: left;width: 100%;}.main {margin: 0 100px 0 300px;overflow: hidden;background-color: #554;}.left {float: left;width: 300px;margin-left: -100%;background-color: #5616;}.right {float: left;width: 100px;margin-left: -100px;background-color: #438;}

两种布局方式的不同之处在于如何处理中间主列的位置：

圣杯布局是利用父容器的左、右内边距+两个从列相对定位；双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整复制代码

3.垂直居中

• position + margin实现（1）

<div class="container"><div class="content"></div></div>.container {position: relative;width: 500px;height: 500px;background-color: #5465;}.content {position: absolute;left: 50%;top: ?50%;width: 200px;height: 200px;margin-left: -100px;margin-top: -100px;background-color: #6465;}

• position + margin实现（2）

.container {position: relative;width: 500px;height: 500px;background-color: #5465;}.content {position: absolute;left: 0;top: ?0;bottom: 0;right: 0;width: 200px;height: 200px;margin: auto;background-color: #6465;}

• position + transform实现

.container {position: relative;width: 500px;height: 500px;background-color: #5465;}.content {position: absolute;left: 50%;top: ?50%;width: 200px;height: 200px;transform: translate(-50%, -50%);background-color: #6465;}

• flex实现

.container {display: flex;align-items: center;justify-content: center;width: 500px;height: 500px;background-color: #5465;}.content {width: 200px;height: 200px;background-color: #6465;}复制代码

• inline-block实现

.container {display: inline-block;width: 500px;height: 500px;text-align: center;background-color: #5465;}.content {display: inline-block;width: 200px;height: 200px;vertical-align: middle;background-color: #6465;}.container::after{content: ‘‘; ???display: inline-block; ???width: 0; ???height: 100%; ???vertical-align: middle;}