Androbaut Androbaut - 1 year ago 101
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?


background-color: #fcfcfc;
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){
padding-left: 5%;
padding-right: 5%;
//Padding for small-medium screens
@media (min-width: 501px){
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 Source

This should do it..

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download