Hello.

I have a text contained within a <div> that I want to center both horizontally, which I managed to do with text-align: center;, and also vertically something that I haven't managed to do yet.

I tried using padding with a percentage but the problem is that the text doesn't stay centered when the amount of text changes.

Is there any equivalent to text-align for vertically centering text inside a <div> ?

Thanks !

Sigh... https://www.siteraw.com/html-css/how-to-create-a-website/flexbox-layouts

There is more than one way to align an element on the vertical axis.

Method 1 - Flexbox

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

Method 2 - Transform & translate

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

Method 3 - Table cell

.parent {
    height: 100%;
    display: table;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}

Method 4 - Absolute positioning

.container > p {
    position: absolute;
    top: 50%;
    margin-top: -10px;
}

Method 5 - Line height

.container {
    line-height: 50%;
}

Thanks, it works as intended.

I'll remember the flexbox model from now on.