How to vertically and horizontally center div

Question

I am facing a problem, how to center text (h1) inside div. I want the web page to be full screen and i achieved that with vh units.

.page { height: 100vh; 
        width: 100%;}

On that page i want div to be centered horizontally and vertically. I tried with

.div { top: 50%;
      left: 50%;}

but that just didnt do the trick. I also want this to be "resposive" si that it is centered on any screen. I am looking to build something like this: http://www.anthonygoodisondesign.com/

score 8 · Answer 1 · answered Feb 01 '17 at 19:23

8

use css code as below;

div{height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  }

<div>  <h1>center me</h1></div>

answered Feb 01 '17 at 19:23

Hemant

1,961
2
17
27

score 2 · Answer 2 · answered Feb 01 '17 at 19:25

2

Use this:

text-align: center;
position: relative;
top: 40vh;
transform: translateY(-50%);

https://jsfiddle.net/yak613/pLb8aysd/

answered Feb 01 '17 at 19:25

yaakov

4,568
4
27
51

you can just use display flex: like .parent { display: flex; align-items:center;justify-content:center;} this will center its child horizontally and verticall – Rashid Iqbal Dec 12 '19 at 14:52

How to vertically and horizontally center div

2 Answers2