0

Trying to center some text in a div that cover the whole page. Any horizontal adjustments that I make are fine yet vertical adjustments either do not work or push the text below the center of the page. 

.home{
 max-width:100%;
 height:100%;
 text-align:center;
 background:url(desktop_1.jpg) no-repeat center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
}
.home .text{
 height:100%;
 width:100%;
}

.home .text h1{
 vertical-align:middle;
}
<div class="home">
 <div class="container">
  <div class="text">
   <h1> MOSTACK </h1>
   <h2> Lorem ipsum dolor sit amet </h2>
   <a href=#> ENTER SITE </a>
  </div>
 </div>
</div>

Understand that this may seem as a dupliacte yet tried solutions on other posts and none are working

EDIT- SOLVED used the following css

.home{
 width:100%;
 height:100%;
 text-align:center;
 background:url(desktop_1.jpg) no-repeat center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
}
.home .text{
 max-width:100%;
 height:50%;
 position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.home .text h1{
 font-family:'Raleway', sans-serif;
 padding-top:30px;
 padding-bottom:100px;
 font-size:60px;
 color:black;
 max-width:100%;
 height:40%;
 position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.home .text a{
 text-decoration:none;
 padding-top:100px;
 font-size:20px;
 color:black;
 max-width:100%;
 height:0%;
 position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
<div class="home">
 <div class="text">
   <h1> MOSTACK </h1>
   <a href="l"> ENTER SITE </a>
 </div>
</div>
Faisal Husain
  • 13
  • 4
  • Do you see in this very page the column **Related**? Which one of those answers have you tried? – Roko C. Buljan Jul 10 '16 at 16:45
  • "How to vertically center a div for all browsers", "best way to center a
    on a page vertically and horizontally", "how to vertically center a div for all browsers" and many more, but before I continue I may have solved the issue as it is centering but relative to the "container" class not the "home" class which I intended it to
     – Faisal Husain Jul 10 '16 at 16:54

0 Answers0