My approach to setting the height of my wrapper to 100vh in order to fill up the entire screen and then aligning a div vertically in the middle by setting it to 50% using position: relative, top, and transform (translateY) seems to be working perfectly on my desktop computer. However, when I view it on my MacBook (both running Chrome), the alignment is off and the div appears "pushed" to only about 30% of the screen height. Can anyone spot what might be wrong with my code? Here is the snippet:
#main-1 {
width: 100%;
height: 100vh;
background-image: linear-gradient(to right, #e1484f 50%, #f9f9f9 50%);
}
#info-left {
width: 20%;
height: 300px;
padding-left: 10%;
position: relative;
top: 50%;
transform: translateY(-50%);
float: left;
text-align: center;
color: #FFF;
}