Is there a way to PUSH down center-center content on smaller screen sizes?

Let's say the element is 400px high, this is great for desktops

However, if you're on an iPhone the element will be centered but the top and bottom may be cut off.

Is there a way to make sure the element starts at the top of the page?

Maybe push it down somehow so it won't get cut off?

Desktop:

.element { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 

---

Would you have to do this for mobile, or is there a better method?

@media screen and (max-height: 420px){ .element{ position: relative; top: 0%; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); margin-top: 40px; margin-bottom: 40px; } 

Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted February 01, 2016 at 09:28PM by typehead http://ift.tt/1Pb5gIa