Search code examples
htmlcsscentering

how to center text vertically without additional html

I want to know is there a way to centre text vertically without the use of a container element. something which is responsive.

EDIT the only value I would know is the height of the h3 element, nothing more, content will appear underneath some as

etc

CSS

h3 {
 height: 140px;
 padding-top: 80px;
 min-height: inherit;
 border: 1px solid black;
 text-align: center;
}

HTML

<h3>TEST</h3>

Here is an example of what i want to achieve codepen test

Solution

  • Line-height is a beautiful thing, especially if its just text. And if you want to be responsive:

    h3 {
  background-color: transparent;
  height: 40vh;
  line-height: 40vh;
  min-height: inherit;
  border: 1px solid black;
  text-align: center;
}