006-CSS定位布局

一、display:table-cell垂直居中

（一）、适用背景

垂直居中是让我们最头疼的一个问题，但是有很多时候又需要垂直居中，如果只是一行文字，垂直居中非常简单，只需要设置元素的 高 = 行高

但是如果是一张图片呢？这样的设置能让图片垂直居中吗？ 可能有的人认为直接设置margin就可以了，但是这样的方式是非常固定的，一旦图片的大小改变了，则不再居中。
那又有一种可能，我们需要一个段落在一个指定的高度内垂直居中呢？这时又该怎么做呢？因为段落的内容会随着用户增加或者减少，所以段落就不再只有一行，或者两行，这时又该如何自动居中呢？

（二）、实现图片的垂直居中

• 应用场景

  以纽曼的头部logo为例，前提条件，需要固定的高度

• html代码

  <div class="logo">
    <a href="index.html">
      <img src="images/logo.png"/>
    </a>
  </div>
  

• css代码

  .header .logo a {
       
    display: table-cell;  /* 转换为表格 */
    vertical-align: middle;  /* table单元格td的文本垂直居中方式 */
    height: 85px;
  }
  .header .logo a img {
        display: block; margin: 0 auto; /* 块状元素水平居中 */ }
  

（三）、实现段落的垂直居中

场景：一个固定高度大小的div里面有一个段落

• html代码

  <div class="box">
    <p>
      今天，中国家电及消费电子博览会(Appliance electronics World Expo，简称AWE)圆满落幕，展会吸引了包括消费电子、
      智能家电、白色家电、厨房电器、生活电器、环境家电及家电配件等多品类的家电制造商参加，也为致力于向家电企业提供优
      质服务的创业者们搭建了展示自己的平台。记者在逛展时遇到杭州沃朴物联科技有限公司CEO袁涌耀先生，拥有无限创业激情
      的他向记者介绍了公司的主打产品——正品控动态智能防伪标签。下面，就是见证高科技的时刻啦，且看记者为您秀一下正品控
      的神奇之处。
    </p>
  </div>
  

• css代码

  .box {
       
    margin: 50px auto;
    width: 500px;
    height: 350px;
    border: 1px solid #999999;
    padding: 0 20px;
  }
  .box p {
       
    display: table-cell;
    vertical-align: middle;
    height: 350px;
    line-height: 30px;
  }
  

（四）、兼容性

由于 display:table-cell 属性不兼容IE8以下的浏览器，所以该垂直居中的方法只能兼容到IE8+

二、css三层嵌套

（一）、三层嵌套

• 介绍

  三层嵌套：实际上就是由3层div的嵌套来实现圆角的效果。三层嵌套是前端必须的掌握的一项技术

• 产生的背景

  开发页面时，美工为了页面的美观，页面的设计总是会有圆角效果。
  当前端人员开发页面时，如果把带圆角的整个图都截下来，那么图片如果太大的话，会严重影响到页面的加载速度，不利于用户体验

• 使用

  <div class=“outer”>
    <div class=“inner_left”>
      <div class=“inner_right”></div>
    </div>
  </div>
  

  最外层的outer用来横向平铺圆角高度的背景，可以ps截图宽1px，高度背景图高44px；中间一层的inner_left用来放左边的圆角背景图，最里面一层的inner_right用来放右边的圆角背景图。这样就能显示出这个圆角背景了

  注意：这3个div的高度必须是相同的。左右两边的圆角ps截图时，宽度最好完全包含圆角的弧度，这样就能两边的圆角背景图和最外层的平铺背景图ÿ