如何居中 div?(有宽高)

水平
块元素

<div id="div1"></div> //单独的块元素居中自己
 #div1{
        background: yellow;
        width:200px;
        height: 30px;
        margin:0 auto; 
    }

行内元素

   <div id="div1">
        <span id="span2"></span>
   </div>
   #div1{
      text-align: center;
    }
    #span2 {
        background: pink;
        width: 20px;
        height: 20px;
        display: inline-block;
    }

水平垂直1

//宽高不确定时可以用
 <div id="div1"></div>
 #div1{
        position: absolute; 
        width: 300px; 
        height: 300px; 
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: pink; 
    }

水平垂直2

 <div id="div1"></div>
 #div1{
        position: absolute; 
        width:500px;
        height:300px;
        top:50%;
        left:50%;
        margin-top:-150px;
        margin-left: -250px;
        background: yellow;
    }

水平垂直3

 <div id="div1"></div>
 #div1{
       position: absolute; 
        width: 500px;
        height: 300px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); 
        background: pink; 
    }

水平垂直4

div id="div1">
        <div id="div2"></div>
</div>
    #div1{ //默认是子元素高度
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #div2{
        background: yellow;
        width: 20px;
        height: 20px;
    }

三栏布局，上下固定，中间自适应

定位
   <div class="con">
       <header></header>
        <main></main>
        <footer></footer>
   </div>
    header{
        position: absolute;
        top: 0;
        width:100%;
        height: 100px;
        background:red;
    }
    main{
        position: absolute;
        top: 100px;
        bottom: 100px;
        width: 100%;
        background: hotpink;
    }
    footer{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100px;
        background: khaki;
    }

flex
<div class="con">
     <header></header>
       <main></main>
       <footer></footer>
   </div>
html, body, .con{ // html,body 必写
       height: 100%;
   }
   .con {
       display: flex;
       flex-direction: column;
   }
   header{
       background: gray;
       height: 100px;
   }
   main{
       background: hotpink;
       flex:1;///////
   }
   footer{
       background: khaki;
       height: 100px;
   }

两栏布局

    <div class='con'>
        <div id="left"></div>
        <div id="right"></div>
    </div>
  #left{
        float: left;
        width: 100px;
        height: 100px;
        background: yellowgreen;
    }
    #right{
        margin-left: 100px;
        height: 100px;
       background:gray;
    }

flex
  .con{
        display: flex;
    }
    #left{
        width: 100px;
        height: 100px;
        background: yellowgreen;
    }
    #right{
        height: 100px;
        flex-grow: 1;
        background:gray;
    }

.con{
        position: relative;
    }
    #left{
        width: 100px;
        height: 100px;
        background: yellowgreen;
    }
    #right{
        height: 100px;
        position: absolute;
        left: 100px;
        right：0；
        top:0;
        bottom:0;
        background:gray;
    }

三栏布局

    <div id="con">
        <div id="left"></div>
        <div id="right"></div>
        <div id="center"></div> //. 必须写在最后
    </div>
    #con{
        height: 100px;
    }
    #left{
        float: left;
        width: 100px;
        height: 100px;
        background: yellowgreen;
    }
    #right{
        float: right;
        width: 200px;
        height: 100px;
        background:gray;
    }
    #center{
        background: aqua;
        margin-left: 100px;
        margin-right: 200px;
        height: 100px;
    }

  #con{
        display: flex;
    }
    #left{
        width: 100px;
        height: 100px;
        background: yellowgreen;
    }
    #right{
        width: 200px;
        height: 100px;
        background:gray;
    }
    #center{
        flex-grow: 1;
        background: blue;
    }

#con{
        position: relative;
    }
    #left{
        position: absolute;
        left: 0;
        width: 100px;
        height: 100px;
        background: yellowgreen;
    }
    #right{
        position: absolute;
        right: 0;
        width: 200px;
        height: 100px;
        background:gray;
    }
    #center{
        height: 100px;
        position: absolute;
        left: 100px;
        right: 200px;
        background: blue;
    }