Androbaut Androbaut - 1 month ago 12
CSS Question

Vertically center paragraph within div

I've got a paragraph that I'd like to vertically center within a div...



This should be a simple enough thing to achieve, but I'm using a responsive-font mixin that dynamically scales the text font size in relationship to the container width.

How might I keep the text centered within it's parent div, while the text itself changes size?

Codepen

body
{
background-color: #fcfcfc;
}
.center-div
{
position: relative;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
max-width: 1400px;
height: 50vh;
background-color: #ccc;
border-radius: 3px;
text-align: center;
}


//Padding for mobile screens
@media (max-width: 500px){
.col-md-12{
padding-left: 5%;
padding-right: 5%;
}
}
//Padding for small-medium screens
@media (min-width: 501px){
.col-md-12{
padding-left: 15%;
padding-right: 15%;
}
}
//Responsive body text
.center-div p{
@include responsive-font(1.5vw, 16px, 38px);
margin-top: 5px;
}


Any help/advice/suggestions will be much appreciated!

Answer

This should do it..

.center-div p{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

https://codepen.io/anon/pen/ORKGQq

Comments