垂直對齊中間與全屏div

Question

實際上，我想使div全屏顯示，並且div內的文本將垂直居中。 我通過css嘗試了很多，但是並沒有完全按照我的意願工作。 我知道如果我將div固定，它將可以工作，但是我也想向下滾動到另一個div。

我希望我的項目看起來像（初始全屏部分）： http : //perfectpointdev.com/perfect-design/

我想將灰色背景作為我的項目的一部分，作為perfectpointdev.com網站的初始部分。 請幫幫我...

我在jsfiddle中的演示項目： http : //jsfiddle.net/zinannadeem/08wve09t/

 #home{ height:100%; display:table; min-height:100%; vertical-align:milddle; width:100%; position:relative; } .welcome-text{ display:table-cell; position:relative; vertical-align:middle; z-index:3; text-align:center; color:#000; font-size:16px; background:#eee; z-index:99; } .welcome-text .container{ max-width:800px;margin:0 auto; } 

 <section id="home"> <div class="welcome-text"> <div class="container"> <h2>We Are Awesome</h2> <p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer</p> </div> </div> </section> <section id="about"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h2 class="page-title">Perfect design build awesome templates for you!</h2> <p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p> <p>Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p> <p><a class="btn btn-primary" href="">Buy It Now</a> <a class="btn btn-primary" href="">See WP Version</a></p> </div> </div> </div> </section> <section id="about"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h2 class="page-title">Perfect design build awesome templates for you!</h2> <p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p> <p>Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p> <p><a class="btn btn-primary" href="">Buy It Now</a> <a class="btn btn-primary" href="">See WP Version</a></p> </div> </div> </div> </section> <section id="about"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h2 class="page-title">Perfect design build awesome templates for you!</h2> <p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p> <p>Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p> <p><a class="btn btn-primary" href="">Buy It Now</a> <a class="btn btn-primary" href="">See WP Version</a></p> </div> </div> </div> </section> 

Answer 1

 .center { position: absolute; width: 100px; height: 50px; top: 50%; left: 50%; margin-left: -50px; margin-top: -25px; } 

 <div class='full-screen'> <div class="center">FULL SCREEN</div> </div> 

嘗試： JSFiddle

編輯： JSFiddle

Answer 2

一種純CSS解決方案:)

的HTML

<div class="table blue">
<div class="tcell">Middle COntent 1</div>
</div>
<div class="table green">
<div class="tcell">Middle COntent 2</div>
</div>
<div class="table red">
<div class="tcell">Middle COntent 3</div>
</div>

的CSS

body, html {
height: 100%;
padding: 0px;
margin: 0px;
}
.table {
display: table;
width: 100%;
height: 100%;
color: #ffffff;
}
.tcell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.blue {
background: blue;
}
.red {
background: red;
}
.green {
background: green;
}

在這里嘗試http://jsfiddle.net/js4630fd/1/