前言
PS: 这些只是个人学习,仅供思路参考,可能会有缺陷,并且都在chrome中测试,不一定适用其他浏览器,而且不考虑IE的,切记!!
PS: 2018/03/23修改，重整了一下样式，新增了一些方法原理介绍，
建议先了解一下基础知识,实际上算深入基础了，随意门:
想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC
想要清晰的明白（二）CSS 盒模型Block box与Line box
基础配置如下,只是一个基本的父子嵌套元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childB {
width: 50px;
height: 50px;
}
#childA,
#childB {
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高宽A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高宽B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>水平居中的各种方法优劣.
margin
因为B是块状，所以看不出效果，但是如果不设置宽度其实就默认占满全屏
这是最基础最简单的写法
#child {margin: 0 auto;}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
margin: 0 auto;
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高宽A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高宽B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>缺點:
1) 需要设置宽度(包括百分比等非固定宽度也可以)
绝对定位
原理：父元素设置相对定位，子元素设置绝对定位，偏移一侧父元素宽度50%，子元素外边距反向负值调整自身宽度50%。重点是从中可以看出这个需要知道子元素的宽度；
#parent{position: relative;}
#child {position: absolute; left: 50%; margin-left: -50px;}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
position: relative;
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
position: absolute;
left: 50%;
margin-left: -50px;
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高宽A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高宽B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>缺點:
1) 需要设置子元素宽度(包括百分比等非固定宽度也可以)
原理：跟上面原理一样，但是使用了css3的transform属性可以自动计算子元素宽度调整
#parent{position: relative;}
#child {position: absolute; left: 50%; transform: translate(-50%);}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
position: relative;
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
position: absolute;
left: 50%;
transform: translate(-50%);
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高宽A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高宽B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>优点:
1) 不需要知道子元素具体宽度;
缺點:
1) transform,兼容性一般,IE9+;
原理：设置方向值,同时给元素一个对应的高宽,它会自动补全margin，就能保持居中了。具体原理参见上面文章。
#parent{position: relative;}
#child {position: absolute; right: 0; left:0; margin: auto;}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
position: relative;
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
position: absolute;
right: 0;
left: 0;
margin: auto;
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高宽A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高宽B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>缺點:
1) 需要设置子元素宽度(包括百分比等非固定宽度也可以)
flex
原理：Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
随意门:
Flex 布局教程：语法篇
Flex 布局教程：实例篇
#parent {
display: flex;//fles布局
justify-content: center;//主轴上的对齐方式（即水平定位）
align-items: flex-start;//交叉轴的起点对齐（即垂直定位）,默认stretch，如果项目未设置高度或设为auto会导致子元素高度占满父元素
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
background-color: green;
}
#parentA,
#parentB {
display: flex;
justify-content: center;
align-items: flex-start;
}
</style>
</head>
<body>
<p>子元素固定高宽A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高宽B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>真是前端救星,有了这个可以无视以前各种诡异属性实现的居中
优点:
1) 布局灵活全面
缺點:
1) align-items默认stretch，如果项目未设置高度或设为auto会导致子元素高度占满父元素
2) 兼容性一般
inline-block+text-align
原理：子元素设置成行内块状元素，父元素设置文本居中对齐也能使其生效
#parent{text-align: center;}
#child {display: inline-block;}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
width: 200px;
height: 200px;
text-align: center;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
display: inline-block;
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高宽A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高宽B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>优点:
1) 不需要设置子元素具体宽度;
2) 兼容性好，甚至可以兼容ie6、ie7;
缺點:
1) 因为text-align是继承样式，会导致下级所有元素文字生效
垂直居中的各种方法优劣.
table-cell+vertical-align
原理：table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。然后让子元素居中
CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table- cell的三层嵌套关系。
特征:
1) 同行等高;
2) 宽度自动调节;
#parent{display:table-cell;vertical-align:middle;}缺点:
1) display类型有限制,只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。;
2) 父元素不能使用浮动属性;
3) IE8下需要特殊处理;
4) 这是一个很复杂的属性组合,下面文章能看的你怀疑人生;
随意门:
CSS深入研究:display的恐怖故事解密(1) - inline-block
CSS深入研究:display的恐怖故事解密(2) - table-cell
大小不固定的图片、多行文字的水平垂直居中
我所知道的几种display:table-cell的应用
我对CSS vertical-align的一些理解与认识（一）
CSS vertical-align的深入理解(二)之text-top篇
CSS深入理解vertical-align和line-height的基友关系
绝对定位
原优缺点都同上，就不再重复了：
#parent{position: relative;}
#child {position: absolute; top: 50%; margin-top: -100px;}#parent{position: relative;}
#child {position: absolute; top: 50%; transform: translate(0,-50%);}#parent{position: relative;}
#child {position: absolute; top: 0; bottom: 0; margin: auto;}flex
原理：Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。上面也提到过它的交叉轴的起点对齐（即垂直定位）align-items；
#parent{display: flex; align-items: center;}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
display: flex;
align-items: center;
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高宽A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高宽B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>优点:
1) 布局灵活全面
2) 即使不设置宽度也不会默认占满全行
缺点:
1) 兼容性一般
水平垂直居中的各种方法.
table-cell+inline-block+vertical-align+text-align
#parent {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#child {
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
display: table-cell;
width: 200px;
height: 200px;
vertical-align: middle;
text-align: center;
background-color: red;
}
#childA {
display: inline-block;
width: 100px;
height: 100px;
}
#childA,
#childB {
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高宽A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高宽B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>优缺点都已经总结过了，而且基本颠覆了父子元素表现形式还影响后代元素的样式，唯一的优点只有兼容性好了
absolute+transform
#parent {
position: relative;
}
#child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
position: relative;
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高宽A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高宽B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>虽然代码量有点多，兼容性有点瑕疵，但还是相当不错的
flex
#parent {
display: flex;
justify-content: center;
align-items: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parentA,
#parentB {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: red;
}
#childA {
width: 100px;
height: 100px;
}
#childA,
#childB {
background-color: green;
}
</style>
</head>
<body>
<p>子元素固定高宽A</p>
<div id="parentA">
<div id="childA">A</div>
</div>
<p>子元素不定高宽B</p>
<div id="parentB">
<div id="childB">B</div>
</div>
</body>
</html>完美布局，唯一能限制它的只有浏览器了
实战：
定宽+自适应
1) float浮动属性
原理：通过float浮动属性让元素脱离文档流，后续元素不能定宽，也不能同使用浮动属性，但可以根据需求决定是或否使用overflow防止内容溢出
.left {
float: left;
}
.right {
overflow: hidden;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.header,
.footer {height: 60px;}
.header{background-color: red;}
.footer {background-color: yellow;}
.content {height: 500px; color: #fff; }
.left,
.right{height: 100%;}
.left{width: 100px; float: left; background-color: pink;}
.right{overflow:hidden; background-color: black;}
</style>
</head>
<body>
<div class="contanier">
<header class="header"></header>
<div class="content">
<div class="left"></div>
<div class="right">Done 当时光已逝 If the day is done , 假如时光已逝， If birds sing no more . 鸟儿不再歌唱， If the wind has fiagged tired , 风儿也吹倦了， Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我盖上， Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
, 如同黄昏时节你用睡眠的衾被裹住大地， The petals of the drooping lotus at dusk. 又轻轻合上睡莲的花瓣。 From the traverer, 路途未完，行囊已空, Whose sack of provisions is empty before the voyage is ended , 衣裳破裂污损，人已精疲力竭。 Whose garment is torn and dust-laden , 你驱散了旅客的羞愧和困窘， Whose strength
is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下， And renew his life like a flower under 如花朵般焕发生机。 The cover of thy kindly night . 在你慈爱的夜幕下苏醒。</div>
</div>
<footer class="footer"></footer>
</div>
</body>
</html>2) table属性
原理：通过模拟table表现形式达到效果，根据特性还能省略设置元素高宽就能自行占满
.content {display:table; table-layout:fixed; }
.left,
.right{display:table-cell;}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.header,
.footer {height: 60px;}
.header{background-color: red;}
.footer {background-color: yellow;}
.content {display:table; table-layout:fixed; height: 500px; color: #fff; }
.left,
.right{display:table-cell; height: 100%;}
.left{width: 100px; background-color: pink;}
.right{background-color: black;}
</style>
</head>
<body>
<div class="contanier">
<header class="header"></header>
<div class="content">
<div class="left"></div>
<div class="right">Done 当时光已逝 If the day is done , 假如时光已逝， If birds sing no more . 鸟儿不再歌唱， If the wind has fiagged tired , 风儿也吹倦了， Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我盖上， Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
, 如同黄昏时节你用睡眠的衾被裹住大地， The petals of the drooping lotus at dusk. 又轻轻合上睡莲的花瓣。 From the traverer, 路途未完，行囊已空, Whose sack of provisions is empty before the voyage is ended , 衣裳破裂污损，人已精疲力竭。 Whose garment is torn and dust-laden , 你驱散了旅客的羞愧和困窘， Whose strength
is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下， And renew his life like a flower under 如花朵般焕发生机。 The cover of thy kindly night . 在你慈爱的夜幕下苏醒。</div>
</div>
<footer class="footer"></footer>
</div>
</body>
</html>3) flex布局
原理：Flex 布局，可以简便、完整、响应式地实现各种页面布局。
.content {display:flex;}
.right{flex:1;}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.header,
.footer {height: 60px;}
.header{background-color: red;}
.footer {background-color: yellow;}
.content {display:flex; width:100%; height: 500px; color: #fff; }
.left,
.right{height: 100%;}
.left{width: 100px; background-color: pink;}
.right{flex:1; background-color: black;}
</style>
</head>
<body>
<div class="contanier">
<header class="header"></header>
<div class="content">
<div class="left"></div>
<div class="right">Done 当时光已逝 If the day is done , 假如时光已逝， If birds sing no more . 鸟儿不再歌唱， If the wind has fiagged tired , 风儿也吹倦了， Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我盖上， Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
, 如同黄昏时节你用睡眠的衾被裹住大地， The petals of the drooping lotus at dusk. 又轻轻合上睡莲的花瓣。 From the traverer, 路途未完，行囊已空, Whose sack of provisions is empty before the voyage is ended , 衣裳破裂污损，人已精疲力竭。 Whose garment is torn and dust-laden , 你驱散了旅客的羞愧和困窘， Whose strength
is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下， And renew his life like a flower under 如花朵般焕发生机。 The cover of thy kindly night . 在你慈爱的夜幕下苏醒。</div>
</div>
<footer class="footer"></footer>
</div>
</body>
</html>圣杯布局&双飞翼布局（两列定宽+一列自适应）
基础结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.header,
.footer {height: 60px;}
.header{background-color: red;}
.footer {background-color: yellow;}
.content {height: 500px; color: #fff; background-color: green;}
.left,
.right,
.main{height: 100%; float: left;}
.left{width: 100px; margin-left: -100%; background-color: pink;}
.main{width: 100%; background-color: blue;}
.right{width: 100px; margin-left: -100px; background-color: black;}
</style>
</head>
<body>
<div class="contanier">
<header class="header"></header>
<div class="content">
<div class="main">
When Day Is Done
当时光已逝
If the day is done ,
假如时光已逝，
If birds sing no more .
鸟儿不再歌唱，
If the wind has fiagged tired ,
风儿也吹倦了，
Then draw the veil of darkness thick upon me ,
那就用黑暗的厚幕把我盖上，
Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
如同黄昏时节你用睡眠的衾被裹住大地，
The petals of the drooping lotus at dusk.
又轻轻合上睡莲的花瓣。
From the traverer,
路途未完，行囊已空,
Whose sack of provisions is empty before the voyage is ended ,
衣裳破裂污损，人已精疲力竭。
Whose garment is torn and dust-laden ,
你驱散了旅客的羞愧和困窘，
Whose strength is exhausted,remove shame and poverty ,
使他在你仁慈的夜幕下，
And renew his life like a flower under
如花朵般焕发生机。
The cover of thy kindly night .
在你慈爱的夜幕下苏醒。
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer class="footer"></footer>
</div>
</body>
</html>前期主要步骤:
1) content子元素浮动;
2) main宽度满屏放在首位,中间栏要在浏览器中优先展示渲染(这里我没太懂有多大区别???);
3) left和right分别用负边距强行并排;
到目前为止看起来效果已经满足了，实际left和right这种玩法是覆盖在main之上的，导致部分内容被遮盖了；
然后圣杯布局&双飞翼布局的差别就在后续步骤了
圣杯布局：
4) content加上内边距padding；
5) left和right使用相对定位偏移；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.header,
.footer {height: 60px;}
.header{background-color: red;}
.footer {background-color: yellow;}
.content {height: 500px; padding: 0 100px; color: #fff; background-color: green;}
.left,
.right{position: relative; width: 100px;}
.left,
.right,
.main{height: 100%; float: left;}
.left{ left: -100px; margin-left: -100%; background-color: pink;}
.main{width: 100%; background-color: blue;}
.right{right: -100px; margin-left: -100px; background-color: black;}
</style>
</head>
<body>
<div class="contanier">
<header class="header"></header>
<div class="content">
<div class="main">
When Day Is Done
当时光已逝
If the day is done ,
假如时光已逝，
If birds sing no more .
鸟儿不再歌唱，
If the wind has fiagged tired ,
风儿也吹倦了，
Then draw the veil of darkness thick upon me ,
那就用黑暗的厚幕把我盖上，
Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
如同黄昏时节你用睡眠的衾被裹住大地，
The petals of the drooping lotus at dusk.
又轻轻合上睡莲的花瓣。
From the traverer,
路途未完，行囊已空,
Whose sack of provisions is empty before the voyage is ended ,
衣裳破裂污损，人已精疲力竭。
Whose garment is torn and dust-laden ,
你驱散了旅客的羞愧和困窘，
Whose strength is exhausted,remove shame and poverty ,
使他在你仁慈的夜幕下，
And renew his life like a flower under
如花朵般焕发生机。
The cover of thy kindly night .
在你慈爱的夜幕下苏醒。
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer class="footer"></footer>
</div>
</body>
</html>双飞翼布局：
4) main加上嵌套元素inner，并设置内边距；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.header,
.footer {height: 60px;}
.header{background-color: red;}
.footer {background-color: yellow;}
.content {height: 500px; color: #fff; background-color: green;}
.left,
.right{position: relative; width: 100px;}
.left,
.right,
.main{height: 100%; float: left;}
.left{margin-left: -100%; background-color: pink;}
.main{width: 100%; background-color: blue;}
.right{margin-left: -100px; background-color: black;}
.inner{padding: 100px;}
</style>
</head>
<body>
<div class="contanier">
<header class="header"></header>
<div class="content">
<div class="main">
<div class="inner">
When Day Is Done
当时光已逝
If the day is done ,
假如时光已逝，
If birds sing no more .
鸟儿不再歌唱，
If the wind has fiagged tired ,
风儿也吹倦了，
Then draw the veil of darkness thick upon me ,
那就用黑暗的厚幕把我盖上，
Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
如同黄昏时节你用睡眠的衾被裹住大地，
The petals of the drooping lotus at dusk.
又轻轻合上睡莲的花瓣。
From the traverer,
路途未完，行囊已空,
Whose sack of provisions is empty before the voyage is ended ,
衣裳破裂污损，人已精疲力竭。
Whose garment is torn and dust-laden ,
你驱散了旅客的羞愧和困窘，
Whose strength is exhausted,remove shame and poverty ,
使他在你仁慈的夜幕下，
And renew his life like a flower under
如花朵般焕发生机。
The cover of thy kindly night .
在你慈爱的夜幕下苏醒。
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer class="footer"></footer>
</div>
</body>
</html>从中可以看出之间的分歧在于：
圣杯布局：父元素设置内边距，子元素设置相对偏移，影响区域从上至下
双飞翼布局：目标元素嵌套多层元素，该元素内部设置内边距，影响区域仅限该元素
flex写法：
1) contanier设置flex布局，至少高度满屏，方向竖直，可以占据全屏效果;
2) content 设置flex布局，方向水平，放大比例1，可以占满宽度；
3) main放大比例1，可以占据剩余空间；
4) left排列顺序放前；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.contanier{display: flex; min-height: 100vh; flex-direction: column;}
.header,
.footer {height: 60px;}
.header{background-color: red;}
.footer {background-color: yellow;}
.content {display: flex; flex: 1; color: #fff; background-color: green;}
.left,
.right{width: 100px;}
.main{flex: 1;}
.left{order: -1; background-color: pink;}
.main{background-color: blue;}
.right{background-color: black;}
</style>
</head>
<body>
<div class="contanier">
<header class="header"></header>
<div class="content">
<div class="main">
When Day Is Done
当时光已逝
If the day is done ,
假如时光已逝，
If birds sing no more .
鸟儿不再歌唱，
If the wind has fiagged tired ,
风儿也吹倦了，
Then draw the veil of darkness thick upon me ,
那就用黑暗的厚幕把我盖上，
Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
如同黄昏时节你用睡眠的衾被裹住大地，
The petals of the drooping lotus at dusk.
又轻轻合上睡莲的花瓣。
From the traverer,
路途未完，行囊已空,
Whose sack of provisions is empty before the voyage is ended ,
衣裳破裂污损，人已精疲力竭。
Whose garment is torn and dust-laden ,
你驱散了旅客的羞愧和困窘，
Whose strength is exhausted,remove shame and poverty ,
使他在你仁慈的夜幕下，
And renew his life like a flower under
如花朵般焕发生机。
The cover of thy kindly night .
在你慈爱的夜幕下苏醒。
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer class="footer"></footer>
</div>
</body>
</html>抛弃颜色形状等干扰代码,实际布局用到的css
.contanier{display: flex; min-height: 100vh; flex-direction: column;}
.content {display: flex; flex: 1; color: #fff; background-color: green;}
.main{flex: 1;}
.left{order: -1;}全程不需要计算数值，不需要偏移位置，用flex布局可以控制方向，比例，顺序，自动计算样式
上面的知识点可以让你应该绝大多数的页面布局了，移动端又会涉及更多知识点，随意门：
viewports剖析
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。