html 两个框垂直居中,HTML+CSS两栏、三栏布局及垂直居中实现方式

HTML+CSS的两栏、三栏布局以及垂直居中的实现方式。因为个人所学有限所以可能不会罗列出所有的实现方法。

1.两栏布局(左固定，右适应)

先写出初始样式和结构。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

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方式

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

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;

}

复制代码双飞翼布局

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

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)

.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;

}

复制代码

效果都如下