这一次我想讲解一下HTML+CSS的两栏、三栏布局以及垂直居中的实现方式。因为个人所学有限所以可能不会罗列出所有的实现方法，不过我会继续努力查漏补缺。1.两栏布局（左固定，右适应）先写出初始样式和结构。<div class=“container”> <div class=“left”>Lorem ipsum dolor sit amet</div> <div class=“right”>Lorem ipsum dolor sit amet</div></div>div { height: 200px; color: #fff;}float+margin实现方式.left { float: left; width: 300px; background-color: #5616;}.right { width: 100%; margin-left: 300px; background-color: #438; }position实现方式.left { position: absolute; left: 0; width: 300px; background-color: #5616;}.right { width: 100%; margin-left: 300px; background-color: #438; }flex.container { display: flex;}.left { flex: 0 0 300px; background-color: #5616;}.right { flex: 1 1; background-color: #438; }右固定，左适应同理。2.三栏布局float + margin方式<div class=“container”> <div class=“left”>Lorem ipsum dolor sit amet</div> <div class=“right”>Lorem ipsum dolor sit amet</div> <div class=“main”>Lorem ipsum dolor sit amet</div></div>div { height: 200px; color: #fff;}.main { width: 100%; margin-left: 300px; margin-right: 100px; background-color: #554;}.left { float: left; width: 300px; background-color: #5616;}.right { float: right; width: 100px; background-color: #438; }position实现方式.main { width: 100%; margin-left: 300px; margin-right: 100px; background-color: #554;}.left { position: absolute; left: 0px; width: 300px; background-color: #5616;}.right { position: absolute; right: 0px; width: 100px; background-color: #438; }以上这些实现方式，虽然实现了但还不够好。因为main是主要的显示区域，所以我们应该先加载它再加载其它的地方。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;}效果都如下