CSS布局 与 元素居中

什么是布局

现有样式的布局，不能满足需求

• 文档流

• 浮动

• 定位

现实需要的布局：

• 导航栏+内容

• 导航栏+内容+广告栏

• 从上到下、从左到右、定宽、自适应
  
  

单列布局

单列布局

实现方式： 定宽 + 水平居中

width: 1000px; //或 max-width: 1000px;margin-left: auto;
margin-right: auto;

注意 max-width和width的区别
max-width屏幕变窄的时候没有拉动条，width在屏幕变窄的时候下方会出现拉动条
范例 和 code

<style>
  .layout{  /*   width: 960px; */
    max-width: 960px;    margin: 0 auto;
  }  #header{    height: 60px;    background: red;
  }  #content{    height: 400px;    background: blue;
  }  #footer{    height: 50px;    background: yellow;
  }</style><div class="layout">
  <div id="header">头部</div>
  <div id="content">内容</div>
  <div id="footer">尾部</div></div>

也可有如下写法，省标签，便于控制局部 范例

<style>
  .layout{    width: 960px;    margin: 0 auto;
  }  #header{    height: 60px;    background: red;
  }  #content{    height: 400px;    background: blue;
  }  #footer{    height: 50px;    background: yellow;
  }</style><div id="header"  class="layout">头部</div><div id="content" class="layout">内容</div><div id="footer" class="layout">尾部</div>

以下是针对通栏的场景，给通栏加背景色 范例

<style>
  .layout{    width: 960px;    margin: 0 auto;
  }  #header{    height: 60px;    background: red;
  }  #content{    height: 400px;    background: blue;
  }  #footer{    height: 50px;    background: yellow;
  }</style><div id="header">
  <div class="layout">头部</div></div><div id="content" class="layout">内容</div><div id="footer">
  <div class="layout">尾部</div></div>

查看范例效果，能发现不完美的地方吗? 对了，滚动条 bug

下面我们进行优化，给 body 设置min-width 去掉滚动背景色 bug
范例

<style>
  .layout{    width: 960px;    margin: 0 auto;
  }  body{    min-width: 960px;
  }  #header{    height: 60px;    background: red;
  }  #content{    height: 400px;    background: blue;
  }  #footer{    height: 50px;    background: yellow;
  }</style><div id="header">
  <div class="layout">头部</div></div><div id="content" class="layout">内容</div><div id="footer">
  <div class="layout">尾部</div></div>

双列布局

一列固定宽度，另外一列自适应宽度

双列布局

如何实现

浮动元素 + 普通元素margin 范例

  <style>
    #content:after{      content: '';      display: block;      clear: both;
    }    .aside{      width: 200px;      height: 500px;      background: yellow;      float: left;
    }    .main{      margin-left: 210px;      height: 400px;      background: red;
    }    #footer{      background: #ccc;
    }  </style>
  <div id="content">
    <div class="aside">aside</div>
    <div class="main">main</div>
  </div>
  <div id="footer">footer</div>

如果侧边栏在右边呢？

侧边栏在右

谨记页面元素的渲染顺序 范例

  <style>
    #content:after{      content: '';      display: block;      clear: both;
    }    .aside{      width: 200px;      height: 500px;      background: yellow;      float: right;
    }    .main{      margin-right: 210px;      height: 400px;      background: red;
    }    #footer{      background: #ccc;
    }  </style>

  <div id="content">
    <div class="aside">aside</div>
    <div class="main">main</div>
  </div>
  <div id="footer">footer</div>

三列布局

两侧两列固定宽度，中间列自适应宽度

三列布局

如何实现

范例

  <style>
    #content:after{      content: '';      display: block;      clear: both;
    }    .menu{      width: 100px;      height: 500px;      background: pink;      float: left;
    }    .aside{      width: 200px;      height: 500px;      background: yellow;      float: right;
    }    .main{      margin-left: 110px; /*为什么要加margin-left*/
      margin-right: 210px;      height: 400px;      background: red;
    }    #footer{      background: #ccc;
    }  </style>  
  <div id="content">
    <!-- 为什么不是main在前面 -->
    <div class="menu">aside</div>
    <div class="aside">aside</div>
    <div class="main">main</div>
  </div>
  <div id="footer">footer</div>

其它布局(了解)

• 水平等距排列

范例
demo范例
以上两个情况都是需要使用到负margin的情况，仔细分析一下为什么需要使用负margin

<style>ul,li{  margin: 0;  padding: 0;  list-style: none;
}.ct{    overflow:hidden;    width: 640px;    border:dashed 1px orange;    margin: 0 auto;
}.ct .item{    float:left;    margin-left: 20px;    margin-top: 20px;    width:200px;    height:200px;    background: red;
}.ct>ul{  margin-left: -20px;
}</style><div class="ct">
  <ul>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
  </ul></div>

• 圣杯布局

• 双飞翼布局

• 流式布局

• 弹性布局flex
  范例

• grid
  grid相关文章

移动端布局

设置 meta ，如

<meta name="viewport" content="width=device-width, inital-scale=1.0, maximum-scale=1.0, user-scalable=no;"/>

适配

媒体查询 or 动态 rem

元素居中

水平居中

text-align

在父元素上设置 text-align: center 使文字/图片水平居中。

.container {  text-align: center;
}

margin

.container {  width: 80%;  margin-left: auto;  margin-right: auto;
}

垂直居中

居中vs不居中

代码

.container {  padding: 40px 0;  text-align: center;
}

绝对定位实现居中（包含定宽高和不定宽高的块的居中）

特别注意代码里面的注释
代码

.container {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  color: #fff;  text-align: center;
}

需要父元素设置过position: relative相对定位

vertical-align实现居中

特别注意代码里面的注释

代码

table-cell实现居中

特别注意代码里面的注释

代码

.container {  width: 300px;  height: 200px;  border: 1px solid ;  display: table-cell;  vertical-align: middle;  text-align: center;
}/* 直接通过display: table-cell；
      vertical-align: middle;进行居中设置
但这个div必须有width和height */

同样是父级实现子元素水平居中

display: flex

用display: flex实现多图在div中居中排列
代码

<div class="space">
  <div class="earth"></div></div>

.space {  width: 100vw;  height: 100vh;  /* 设置宽高以显示居中效果 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */}body {  margin: 0;  background: rgba(0, 0, 0, .95);
}.earth::after {  content: '';  font-size: 85px;
}

https://codepen.io/twhy/pen/xrrbGg

作者：evenyao
链接：https://www.jianshu.com/p/10974d1f429f