Vertically center text in a 100% height div?

The best and easiest way to do it (currently in 2015 2020) is using flexbox: .parent-selector { display: flex; align-items: center; } And that’s it 😀 Check-out this working example: div { border: 1px solid red; height: 150px; width: 350px; justify-content: center; /* Actual code */ display: flex; align-items: center; } <div> <p>Hola</p> </div> Old …

Read more

CSS Centering with Transform

Because translateX(-50%) moves something back to the left 50% (because of the – negative value), which means it pairs with left: 50%; to center something. If you want to use right: 50%; then use that with translateX(50%) to center. * {margin:0;} span { position: absolute; top: 50%; right: 50%; transform: translate(50%,-50%); background: black; color: white; …

Read more