Having text center and aligned on the page no matter what the size of the browser is

Question

I am using the tag <h1> in HTML and I'm trying to put the text in the middle of the webpage, no matter how much you change the size of the webpage. Basically so the text is responsive to the size of the webpage as well. Here is what I mean:

In my css page, I tried to do the following:

h1 {
 text-align: center;
 display: table-cell;
 vertical-align: middle;
}

However, this didn't work. How would I do this?

This link may help you https://stackoverflow.com/a/9826008/7615081 to make center text — vj.madamala7, Dec 22 '17 at 04:56

score 1 · Answer 1 · answered Dec 22 '17 at 05:20

1

Just Try this:

 body{
       position:relative;
    }

    h1{
       position:absolute;
       width: /*your desired width*/
       top:0;
       bottom:0;
       left:0;
       right:0;
       margin:auto auto;
       text-align:center;
    }

Note: parent class always be relative when you use absolute child class.

answered Dec 22 '17 at 05:20

pradeep kumar

983
10
21

Sub heading also to be centered? then wrap the heading and subheading into div then apply position absolute to that div – pradeep kumar Dec 22 '17 at 05:33
Try this in your code. Code pen causing problem with body height, U just try in your code – pradeep kumar Dec 22 '17 at 05:49

VXp · Accepted Answer · 2017-12-22T07:10:01.810

You can do that multiple ways, two common ones are with the positioning and Flexbox:

Positioning:

body {
  position: relative; /* usually the parent, in this case the body element, has position relative so that the absolute positioned child is positioned relative to it */
  height: 100vh; /* 100% of the viewport height */
  margin: 0; /* recommended */
}

h1 {
 position: absolute; /* taken out of the normal flow of the document */
 top: 50%; /* moved down by 50% of the screen height */
 transform: translateY(-50%); /* moved back up (Y axis) by half of its height to achieve the perfect center */
 width: 100%; /* needs to be defined to keep the default block behavior */
 text-align: center;
 margin: 0; /* again, for perfect center */
}

<h1>This is center aligned text</h1>

Flexbox:

body { /* or any other parent element */
  display: flex; /* flex behavior (displays children inline) */
  justify-content: center; /* horizontal centering */
  align-items: center; /* vertical centering */
  height: 100vh;
  margin: 0;
}

h1 {
  text-align: center; /* comes in handy when resizing the browser width, if the text is long/big enough */
}

<h1>This is center aligned text</h1>

score 0 · Answer 3 · answered Dec 22 '17 at 11:58

As a table cell, as you tried, works BUT it's the wrapper not the h1 the element to be made a "table-cell", so the h1 can be vertically centered to middle. To make that cell cover the whole screen you can use 100vh height and 100wv width... or position fixed using the 4 corners to force it to cover the whole screen (top;0, left:0, right:0, bottom:0;).

Having text center and aligned on the page no matter what the size of the browser is

3 Answers3