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

＆＃13;

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

＆＃13;

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

＆＃13;

尝试：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/

垂直对齐中间与全屏div

2 个答案: