页面基础布局相关知识 --- 居中&经典布局

摘要：子元素固定高宽子元素不定高宽缺點需要设置子元素宽度包括百分比等非固定宽度也可以原理是的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。路途未完，行囊已空衣裳破裂污损，人已精疲力竭。抛弃颜色形状等干扰代码实际布局

PS: 这些只是个人学习,仅供思路参考,可能会有缺陷,并且都在chrome中测试,不一定适用其他浏览器,而且不考虑IE的,切记!!

PS: 2018/03/23修改，重整了一下样式，新增了一些方法原理介绍，

建议先了解一下基础知识,实际上算深入基础了，随意门:
想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC
想要清晰的明白（二）CSS 盒模型Block box与Line box

基础配置如下,只是一个基本的父子嵌套元素

  
    
    
    
  

  
    
子元素固定高宽A
    

      
A
    
    
子元素不定高宽B
    

      
B
    
  

因为B是块状，所以看不出效果，但是如果不设置宽度其实就默认占满全屏
这是最基础最简单的写法

#child {margin: 0 auto;}

  
    
    
    
  

  
    
子元素固定高宽A
    

      
A
    
    
子元素不定高宽B
    

      
B
    
  

缺點:

1) 需要设置宽度(包括百分比等非固定宽度也可以)

原理：父元素设置相对定位，子元素设置绝对定位，偏移一侧父元素宽度50%，子元素外边距反向负值调整自身宽度50%。重点是从中可以看出这个需要知道子元素的宽度；

#parent{position: relative;}
#child {position: absolute; left: 50%; margin-left: -50px;}

  
    
    
    
  

  
    
子元素固定高宽A
    

      
A
    
    
子元素不定高宽B
    

      
B
    
  

缺點:

1) 需要设置子元素宽度(包括百分比等非固定宽度也可以)

原理：跟上面原理一样，但是使用了css3的transform属性可以自动计算子元素宽度调整

#parent{position: relative;}
#child {position: absolute; left: 50%; transform: translate(-50%);}

  
    
    
    
  

  
    
子元素固定高宽A
    

      
A
    
    
子元素不定高宽B
    

      
B
    
  

优点:

1) 不需要知道子元素具体宽度;

缺點:

1) transform,兼容性一般,IE9+;

原理：设置方向值,同时给元素一个对应的高宽,它会自动补全margin，就能保持居中了。具体原理参见上面文章。

#parent{position: relative;}
#child {position: absolute; right: 0; left:0; margin: auto;}

  
    
    
    
  

  
    
子元素固定高宽A
    

      
A
    
    
子元素不定高宽B
    

      
B
    
  

缺點:

1) 需要设置子元素宽度(包括百分比等非固定宽度也可以)

原理：Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
随意门:
Flex 布局教程：语法篇
Flex 布局教程：实例篇

#parent {
    display: flex;//fles布局
    justify-content: center;//主轴上的对齐方式（即水平定位）
    align-items: flex-start;//交叉轴的起点对齐（即垂直定位）,默认stretch，如果项目未设置高度或设为auto会导致子元素高度占满父元素
}

  
    
    
    
  

  
    
子元素固定高宽A
    

      
A
    
    
子元素不定高宽B
    

      
B
    
  

真是前端救星,有了这个可以无视以前各种诡异属性实现的居中

优点:

1) 布局灵活全面

缺點:

1) align-items默认stretch，如果项目未设置高度或设为auto会导致子元素高度占满父元素
2) 兼容性一般

原理：子元素设置成行内块状元素，父元素设置文本居中对齐也能使其生效

#parent{text-align: center;}
#child {display: inline-block;}

  
    
    
    
  

  
    
子元素固定高宽A
    

      
A
    
    
子元素不定高宽B
    

      
B
    
  

优点:

1) 不需要设置子元素具体宽度;
2) 兼容性好，甚至可以兼容ie6、ie7;

缺點:

1) 因为text-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是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。上面也提到过它的交叉轴的起点对齐（即垂直定位）align-items；

#parent{display: flex; align-items: center;}

  
    
    
    
  

  
    
子元素固定高宽A
    

      
A
    
    
子元素不定高宽B
    

      
B
    
  

优点:
1) 布局灵活全面
2) 即使不设置宽度也不会默认占满全行
缺点:
1) 兼容性一般

#parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#child {
  display: inline-block;
}

  
    
    
    
  

  
    
子元素固定高宽A
    

      
A
    
    
子元素不定高宽B
    

      
B
    
  

优缺点都已经总结过了，而且基本颠覆了父子元素表现形式还影响后代元素的样式，唯一的优点只有兼容性好了

#parent {
  position: relative;
}
#child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

  
    
    
    
  

  
    
子元素固定高宽A
    

      
A
    
    
子元素不定高宽B
    

      
B
    
  

虽然代码量有点多，兼容性有点瑕疵，但还是相当不错的

#parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

  
    
    
    
  

  
    
子元素固定高宽A
    

      
A
    
    
子元素不定高宽B
    

      
B
    
  

完美布局，唯一能限制它的只有浏览器了

1) float浮动属性
原理：通过float浮动属性让元素脱离文档流，后续元素不能定宽，也不能同使用浮动属性，但可以根据需求决定是或否使用overflow防止内容溢出

.left {
  float: left;
}
.right {
  overflow: hidden;
}

  
    
    
    
  

  
    

      

      

        

        
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 . 在你慈爱的夜幕下苏醒。
      
      
    
  

2) table属性
原理：通过模拟table表现形式达到效果，根据特性还能省略设置元素高宽就能自行占满

.content {display:table; table-layout:fixed; }
.left,
.right{display:table-cell;}

  
    
    
    
  

  
    

      

      

        

        
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 . 在你慈爱的夜幕下苏醒。
      
      
    
  

3) flex布局
原理：Flex 布局，可以简便、完整、响应式地实现各种页面布局。

.content {display:flex;}
.right{flex:1;}

  
    
    
    
  

  
    

      

      

        

        
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 . 在你慈爱的夜幕下苏醒。
      
      
    
  

基础结构

  
    
    
    
  

  
    

      

      

        

          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 .
          在你慈爱的夜幕下苏醒。
        
        

        

      
      
    
  

前期主要步骤:
1) content子元素浮动;
2) main宽度满屏放在首位,中间栏要在浏览器中优先展示渲染(这里我没太懂有多大区别???);
3) left和right分别用负边距强行并排;

到目前为止看起来效果已经满足了，实际left和right这种玩法是覆盖在main之上的，导致部分内容被遮盖了；
然后圣杯布局&双飞翼布局的差别就在后续步骤了

圣杯布局：
4) content加上内边距padding；
5) left和right使用相对定位偏移；

  
    
    
    
  

  
    

      

      

        

          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 .
          在你慈爱的夜幕下苏醒。
        
        

        

      
      
    
  

双飞翼布局：
4) main加上嵌套元素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 .
            在你慈爱的夜幕下苏醒。
        
        
        

        

      
      
    
  

从中可以看出之间的分歧在于：
圣杯布局：父元素设置内边距，子元素设置相对偏移，影响区域从上至下
双飞翼布局：目标元素嵌套多层元素，该元素内部设置内边距，影响区域仅限该元素

flex写法：
1) contanier设置flex布局，至少高度满屏，方向竖直，可以占据全屏效果;
2) content 设置flex布局，方向水平，放大比例1，可以占满宽度；
3) main放大比例1，可以占据剩余空间；
4) left排列顺序放前；

  
    
    
    
  

  
    

      

      

        

          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 .
          在你慈爱的夜幕下苏醒。
        
        

        

      
      
    
  

抛弃颜色形状等干扰代码,实际布局用到的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剖析

使用Flexible实现手淘H5页面的终端适配