Reputation: 199
Actually I want to make a div full screen and the texts inside the div will be vertically middle. I tried a lot by css but not fully worked as I want. I know if i make the div fixed it will be working but I want to scroll down to the other div also.
I want my project to look like (Initial full screen part): http://perfectpointdev.com/perfect-design/
I want to make the gray background part of my project as the perfectpointdev.com website initial section. Please help me out...
My demo project in 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>
Upvotes: 0
Views: 1954
Reputation: 2345
.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>
try: JSFiddle
EDIT: JSFiddle
Upvotes: 2
Reputation: 6933
One pure css solution :)
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;
}
Try it here http://jsfiddle.net/js4630fd/1/
Upvotes: 1