Position a div in the center of a page even if the width and height changes

Question

<div style="height:100px;width:100px;border:1px solid black"></div>

How can I position this div in the center?

Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Michael Mior, Apr 07 '17 at 19:22

score 1 · Answer 1 · answered Apr 07 '17 at 19:22

1

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

More you find here.

answered Apr 07 '17 at 19:22

Jan Giacomelli

1,299
11
23

score 0 · Answer 2 · answered Apr 07 '17 at 19:21

0

On the parent of that div:

div.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

answered Apr 07 '17 at 19:21

Pytth

4,008
24
29

score 0 · Answer 3 · answered Apr 07 '17 at 19:23

You can absolutely position the element with top: 50%; left: 50%; then use translate() to move it back/up 50% of it's own width to put it in the absolute center.

div {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

<div style="height:100px;width:100px;border:1px solid black"></div>

Position a div in the center of a page even if the width and height changes

3 Answers3