css相關

1、div垂直居中對齊

使用CSS實現將一個固定位置(position:fixed)的DIV水平居中佈局

<div class="menu">
    ...
</div>

<style type="text/css">
.menu{
    position:fixed;
    width:800px;
    top:0;
}
</style>

方案一：

設置left和margin-left屬性，以下：

left: 50%;
margin-left: -400px; /* 設置margin-left爲整個DIV的一半 */

方案二：

此方案爲CSS3如下版的解決方案，但此方案適合全部的元素，包括沒有with屬性以及動態with的元素。

水平居中：

left: 50%;
transform: translateX(-50%);

垂直居中：

top: 50%;
transform: translateY(-50%);

水平和垂直居中：

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

方案三：

設置left:0,right:0,margin:auto，以下：

#menu {
    position: fixed;   
    left: 0;           
    right: 0;           
    top: 0px;         
    width: 500px;      
    margin: auto;      /* 水平居中 */
    max-width: 100%;   
    z-index: 10000;   
}

兩種以上方式實現已知或者未知寬度的垂直水平居中。

// 1
.wraper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 100px;
    margin: -50px 0 0 -200px;
  }
}
// 2
.wraper{
    background-color: #00d1b2;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
// 3 
.wraper { 
　　.box { 
　　　　display: flex; 　
　　　　justify-content:center; 
　　　　align-items: center; 
　　　　height: 100px; 
　　} 
}

 二.聖盃佈局

實現左側寬度爲 200px，右側寬度爲 150px，中間是流動的佈局

<div id="header">#header</div>
<div id="container">
    <div id="center" class="column">#center</div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>

body{
        min-width:550px;
    }
    #header,
    #footer {
        background-color: #c9c9c9;
    }
    #container{
        padding-left:200px;
        padding-right:150px;
    }
    #container .column{
        height:200px;
        float:left;
        position:relative;
    }
    #center{
        background-color:#e3e3e3;
        width:100%;
    }
    #left{
        width:200px;
        background-color:#0abcff;
        margin-left:-100%;
        right:200px;
    }
    #right{
        width:150px;
        background-color: #0ABC00;
        margin-right:-150px;
    }
    #footer{
        clear:both;
    }