前端面試中，經常看到垂直居中與水平居中，實際排版用的多嗎？

以前排版排的比較少，沒有設計圖的那種，我們後端一般都是用框架或者仿照樣式，最近公司需要定製一個企業站，要還原設計稿。我在排版中大量用到了垂直居中與水平居中。

1，傳統的水平居中（固定寬度居中），如一個div，寬1200

div{
    width:1200px;
    margin:20px auto;
}

2，水平與垂直居中，網上有很多種方式，我現在用的是這種方式

這個方法使用絕對定位的 div，把它的 top 設置為 50％，top margin 設置為負的 content 高度。這意味著對象必須在 CSS 中指定固定的高度。

因為有固定高度，或許你想給 content 指定 overflow:auto，這樣如果 content 太多的話，就會出現滾動條，以免content 溢出。

<div class="content"> Content goes here</div>  

#content {
    position: absolute;
    top: 50%;
    height: 240px;
    margin-top: -120px; /* negative half of the height */
}

優點：

• 適用於所有瀏覽器
• 不需要嵌套標簽

缺點：

• 沒有足夠空間時，content 會消失(類似div 在 body 內，當用戶縮小瀏覽器視窗，滾動條不出現的情況)

我的項目中，有一個這樣的版面，先給素材:

需要實現的效果：

<div class="img"><div class="icon"></div></div>

.profile-bottom .c .img {
    background: url(../images/C-1.png) no-repeat;
    height: 429px;
    position: relative;
    width: 607px;
    cursor: pointer;
    z-index: 1000;
    float: left;
}

.profile-bottom .c .img .icon {
    background: url(../images/C-2.png) no-repeat;
    position: absolute;
    top: 50%;
    width: 117px;
    left: 50%;
    height: 117px;
    margin: -59px 0px 0px -59px;
    cursor: pointer;
}