You can center text vertically in a DIV using the CSS display: flex and align-items: center properties. Here’s an example of how to do this:

HTML:

<div class="container">
    <p>Vertically centered text</p>
</div>

CSS:

.container {
    display: flex; /* set container to flex */
    align-items: center; /* center items vertically */
    height: 100px; /* set a fixed height */
}

This will create a container div with a paragraph element inside it. The container div has the display: flex property set, which makes it a flex container and the paragraph element will be a flex item.

The align-items: center property is used on the container so that the child element will be centered vertically inside the container.

The height property is set on the container div so that it has a fixed height, this allows the child element to be centered vertically.

You can also use justify-content:center property to center the element horizontally as well.

You can also use other CSS properties such as margin: auto instead of flex properties.

.container {
    height: 100px; /* set a fixed height */
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

This will work as well and the text will be centered vertically and horizontally inside the container div.

Also Read:

Categorized in:

HTML & CSS

Tagged in:

, , ,