CSS布局与居中

布局

随着前端的发展,现有样式(文档流、浮动、定位)已经不能满足人们的需求，
人们需要：
导航栏+内容
导航栏+内容+广告栏
从上到下、从左到右、定宽、自适应...

单列布局

1.gif

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

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

注意 max-width和width的区别,最好用max-width

1、一栏布局

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

2、一栏布局（通栏）

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

双列布局

22.gif

实现方式： 一列固定宽度，另外一列自适应宽度

浮动元素 + 普通元素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">content</div>
  </div>
  <div id="footer">footer</div>

其他的方法：还可以使用position的absolute，可以得到同样的效果

三列布局

333.gif

实现方式：两侧两列固定宽度，中间列自适应宽度

1.使用左右两栏使用float属性，中间栏使用margin属性进行撑开

#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-right: 210px;
      height: 400px;
      background: red;
    }

    #footer{
      background: #ccc;
    }

  <div id="content">
    <!-- 为什么不是main在前面 -->
    <div class="menu">aside</div>
    <div class="aside">aside</div>
    <div class="main">content</div>
  </div>
  <div id="footer">footer</div>

2. 使用position定位实现，即左右两栏使用position进行定位，中间栏使用margin进行定位

.left{
    background: yellow;
    width: 200px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
}
.middle{
    height: 300px;
    margin: 0 220px;
    background: red;
}
.right{
    height: 300px;
    width: 200px;
    position: absolute;
    top: 0;
    right: 0;
    background: green;
}

<div class="left">左栏</div>
<div class="middle">中间栏</div>
<div class="right">右栏</div>

其它布局

水平等距排列

实现方式：浮动加 -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>

圣杯布局

将middle的宽度设置为100%，然后将其float设置为left，其中的main块设置margin属性，然后左边栏设置float为left，之后设置margin为-100%，右栏也设置为float：left，之后margin-left为自身大小。

.wrapper{
    overflow: hidden;  //清除浮动
}
.middle{
    width: 100%;
    float: left;
}
.middle .main{
    margin: 0 220px;
    background: red;
}
.left{
    width: 200px;
    height: 300px;
    float: left;
    background: green;
    margin-left: -100%;
}
.right{
    width: 200px;
    height: 300px;
    float: left;
    background: yellow;
    margin-left: -200px;
}
<div class="wrapper">
    <div class="middle">
        <div class="main">中间</div>
    </div>
    <div class="left">左栏</div>
    <div class="right">右栏</div>
</div>

元素居中

水平居中

1 行内元素水平居中

行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。

.center{
        text-align:center;
}
<div class="center">水平居中</div>

2 块级元素水平居中

只需给需要居中的块级元素加margin:0 auto即可

  .center{
      width:200px;
      margin:0 auto;
      border:1px solid red;
  }
  <div class="center">水平居中</div>

水平垂直居中

1 文本水平垂直居中

设置paddingtop=paddingbottom；text-align:center;

2 绝对定位 + 负margin

html,body {
  height: 100%;
}
.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -150px; 
  width: 400px;
  height: 300px;
  box-shadow: 0px 0px 3px #000;
}

.dialog .header{
  padding: 10px;
  background: #000;
  color: #fff;
}
.dialog .content{
  padding: 10px;
}
<div class="dialog">
    <div class="header">我是标题</div>
    <div class="content">我是内容</div>
  </div>

3 绝对定位 + margin:auto

 div{
        width: 200px;
        height: 200px;
        background: green;
        position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

4 绝对定位 + transform

div{
        width: 200px;
        height: 200px;
        background: green;
        position:absolute;
        left:50%;    /* 定位父级的50% */
        top:50%;
        transform: translate(-50%,-50%); /*自己的50% */
    }

5 table-cell实现居中

div{
        display:table-cell;
        text-align:center;
        vertical-align: middle;
    }

6 vertical-align实现居中

.box{
  width: 300px;
  height: 200px;
  border: 1px solid ;
  text-align: center;
}
.box:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.box img{
  vertical-align: middle;
  background: blue;
}
 <div class="box">
    <img src="" alt="">
 </div>

7 flex布局实现居中

.box{
         height:600px;  
         display:flex;
         justify-content:center;  //子元素水平居中
         align-items:center;      //子元素垂直居中
           /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
    }
    .box>div{
        background: green;
        width: 200px;
        height: 200px;
    }