垂直和水平的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

回答

相关问题