HTML+CSS 布局，两栏、三栏，垂直居中实现

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;
}
复制代码

• 浮动+边距部署方式

.left {
	float: left;
	width: 300px;
	background-color: #5616;
}
.right {
	width: 100%;
	margin-left: 300px;
	background-color: #438;	
}
复制代码

• 位置部署方式

.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。三列布局

• 浮动+边距法

<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;	
}
复制代码

• 位置实现方法

.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是主显示区域，所以我们需要先加载它，然后再在其他地方加载。

• 网格实现方法

.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.垂直居中

• 位置+边距实现（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;
}
复制代码

• 位置+边距实现（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;
}
复制代码

• 位置+变换实现

.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;
}
复制代码

效果如下

作者：早安
来源：掘金