垂直和水平的div居中和高效的css

很新的網頁設計，我認爲這將是一個好主意，創建一個網站的基本樣機，頭部，段落和粘腳，以確保我有一些基礎知識:)垂直和水平的div居中和高效的css

我想知道如何將.paragraph div垂直以及水平居中以及如果有任何明顯的問題或效率低下，我應該知道的代碼。我只是想確保我可以編寫一個基本的佈局而不會產生壞習慣。

所以我結束了這個CSS：

.head { 
margin: auto; 
height: 100%; 
width: 100%; 
background-color: #000; 
color:white; 
text-align:center;} 

body { 
    background-color:#99C; 
} 


.h1 { 
    font-size:50px; 
    font-family:Georgia, "Times New Roman", Times, serif; 
    padding:30px; 
} 



.paragraph { 
    color:#FFF; 
    text-align:center; 
    background-color:#333; 
    width:35%; 
    margin:auto; 
    margin-top:165px; 
    padding:10px; 

} 



* { 
    margin: 0; 
} 


html, body { 
    height: 100%; 
} 


.wrapper { 
    min-height: 100%; 
    /* equal to footer height */ 
    margin-bottom: -70px; 
} 


.wrapper:after { 
    content: ""; 
    display: block; 
} 


.site-footer, .wrapper:after { 
    /* .push must be the same height as footer */ 
    height: 70px; 
} 


.site-footer { 
    background: orange; 
    text-align:center; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:40px; 
    line-height:70px; 

}

這裏是它的外觀：

enter image description here

在此先感謝！

亞當^ h

來源

2013-09-28 Adam Hollister

那麼你的問題到底是什麼？圖像沒有顯示出問題。 –

我相信你會得到一些有用的答案，但我只想補充一點。就高效的代碼而言，每個網站都有所不同。這是應該處理的主要技能，更改代碼以適應每種情況。瀏覽器支持是一件值得考慮的事情，並確保您的代碼在您希望用戶使用的瀏覽器上正常工作。祝你好運，快樂的編碼！ – Omega

好，主要是我想知道在本體中垂直居中的段落div，我一直在這裏和其他地方的其他帖子上四處張望，它令我感到驚訝，唯一的解決方案，我可以找到需要添加額外的容器div周圍你想要居中。似乎對我很瘋狂，但無論如何感謝您的幫助！ –

什麼，當你需要改變頁眉/頁腳高度出於某種原因？你需要在你的CSS中修改多個規則，以保持你的佈局。

下面是你想要的佈局，沒有固定任何高度，使用純CSS。 Working Fiddle

HTML：

<div class="Container"> 
    <div class="Header"> 
     <p>I'm in the header</p> 
     <p>my height is not fixed</p> 
    </div> 
    <div class="HeightTaker"> 
     <div class="Wrapper Container Inverse"> 
      <div> 
       <div class="Footer"> 
        <p>I'm in the footer</p> 
        <p>my height is not fixed</p> 
       </div> 
      </div> 
      <div class="HeightTaker"> 
       <div class="Wrapper"> 
        <div class="Content"> 
         <div> 
          <p>I'm in the content</p> 
          <p>I always span the rest of the page.</p> 
          <p>If my content is bigger than my available space, I will scroll</p> 
          <p>This Layout has been tested on: IE10, FireFox, Chrome, Safari, Opera using Pure CSS only</p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS：

* 
{ 
    margin: 0; 
    padding: 0; 
} 
html, body, .Container 
{ 
    height: 100%; 
} 
    .Container:before 
    { 
     content: ''; 
     height: 100%; 
     float: left; 
    } 
.HeightTaker 
{ 
    position: relative; 
    z-index: 1; 
} 
    .HeightTaker:after 
    { 
     content: ''; 
     clear: both; 
     display: block; 
    } 
.Wrapper 
{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 
.Inverse, .Inverse > * 
{ 
    -moz-transform: rotateX(180deg); 
    -ms-transform: rotateX(180deg); 
    -o-transform: rotate(180deg); 
    -webkit-transform: rotateX(180deg); 
    transform: rotateX(180deg); 
} 

.Header 
{ 
    /*for demonstration only*/ 
    background-color: #bf5b5b; 
} 
.Content 
{ 
    height: 100%; 
    overflow: auto; 
    text-align: center; 
    font-size: 0; 
    /*for demonstration only*/ 
    background-color: #90adc1; 
} 
    .Content:after 
    {  
     content: ''; 
     display: inline-block; 
     height: 100%; 
     vertical-align: middle; 
    } 
    .Content > div 
    { 
     font-size: medium; 
     display: inline-block; 
     vertical-align: middle; 
    } 

.Footer 
{ 
    /*for demonstration only*/ 
    background-color: #b5a8b7; 
}

注意：在我的做法唯一的缺點是，是，我有內容之前構建頁腳（在HTML中）。

來源

2013-09-28 23:17:37 avrahamcool

好吧，這很有趣，我已經有點亂了，看看會發生什麼，我會在早上繼續（im在英國，就像這裏的凌晨1點）。只是想知道，我可以看到沒有'.Inverse，.Inverse> *'webkit等頁腳出現在內容上方，但我不知道爲什麼。這有什麼功能？ –

只有當您嘗試拉伸容器中的最後一個元素時，纔會拉伸內容以獲取其父級作品的所有可用高度。所以我不得不在HTML中將中間div放在容器中，然後使用CSS在視圖中將其顛倒。 – avrahamcool

垂直和水平的div居中和高效的css

回答

相關問題