How to vertically align any HTML element to the middle of its container?

Question

It is easy to horizontally align any HTML element using the CSS property "align", but how to do the same vertically using CSS?

Answer 1

assuming you have created the container and the element is in it, having top:50% and right:50% should suffice. You can also play around with the margins for more accuracy.

Try building a container and set a background color for it and use different attributes for practice. It helps a lot

Answer 2

<div>
<center><h1>Hello Salam </h1></center>
</div>

Answer 3

This technique will center your content vertically.

HTML:
<div>
<h1>Some Text</h1>
</div>

CSS:

div {
position: relative;
width: 500px;
height: 500px;
}
h1 {
position: absolute;
top: 50%
transform: translateY(-50%);
}