Center a div horizontally and vertically and keep centered when resizing the parent

Question

I want to center a div horizontally and vertically at all times.

I can reduce/increase the width of the window and the div will respond by always remaining in the center of the window

.cent
{
  height:50px;
  width:50px;
  background-color:black;
  margin:auto;
}

Here is a JSFiddle Example of what I have currently. But I want to keep the div centered vertically as well so if I reduce/increase the height of the window the the div will respond by staying in the middle of the window.

In regards to the example, I want to keep the blackbox vertically centered on window resize in the same way it always stays in the center horizontally.

look at this :) http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/ — Michael Unterthurner, Jul 08 '13 at 06:19

score 37 · Accepted Answer · edited Aug 17 '22 at 07:32

You can do this with CSS tables:

JsFiddle

Markup

<div class="container">
    <div class="cent"></div>
</div>

(Relevant) CSS

    html,body
    {
        height: 100%;
    }
    body
    {
       display: table; 
       margin: 0 auto;
    }
    
    .container
    {  
        height: 100%;
        display: table-cell;   
        vertical-align: middle;    
    }
    .cent
    {
        height: 50px;
        width: 50px;
        background-color: black;      
    }

score 1 · Answer 2 · edited Aug 17 '22 at 04:20

1

try this

    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;

edited Aug 17 '22 at 04:20

Jamiu S.

5,257
5
12
34

answered Jul 08 '13 at 06:24

Omar Shbaro

68
6

score 1 · Answer 3 · edited Aug 17 '22 at 07:31

1

Demo link is here

    .cent
    {
        height:50px;
        width:50px;
        background-color:black;
        margin:auto;
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-25px;
        margin-top:-25px;
    }

edited Aug 17 '22 at 07:31

Jamiu S.

5,257
5
12
34

answered Jul 08 '13 at 06:28

Swarnamayee Mallia

2,004
14
11

score 0 · Answer 4 · answered Jul 08 '13 at 06:23

0

Test this

.cent {
    width: 50px;
    height: 50px;
    background-color: black;

    position:absolute;
    left:0; 
    right:0;
    top:0; 
    bottom:0;
    margin:auto;

    max-width:100%;
    max-height:100%;
    overflow:auto;
}

here you have a example: http://jsbin.com/iquviq/30/edit

answered Jul 08 '13 at 06:23

Michael Unterthurner

921
1
10
25

This will make the div flow off of the top of the page when the window is vertically smaller than the height. – MRC Aug 21 '14 at 09:52

score 0 · Answer 5 · answered Jul 08 '13 at 06:23

0

Check this

 .cent
   {
      height:50px;
      width:50px;
      background-color:black;
      margin:auto;
      margin-top:50%;
   }

answered Jul 08 '13 at 06:23

Ubaid Ashraf

1,049
5
15
43

The div is now 25px lower than the window center. And when the window resizes, it won't give the effect Aaron wants. You can easily see it when you set the height to 500px. – GreyRoofPigeon Jul 08 '13 at 06:27

score 0 · Answer 6 · answered Jul 08 '13 at 06:26

0

try this

http://jsfiddle.net/tVuS6/4/

      .cent
    {
    height:50px;
    width:50px;
    background-color:black;
    margin-left: -150px;
    margin-top: -150px;
   margin:auto;
    position:absolute;
    top:50%;
    left:50%;
    }

answered Jul 08 '13 at 06:26

Falguni Panchal

8,873
3
27
33

RbG · Answer 7 · 2013-07-08T07:13:20.500

0

.cent
{
  height:50px;
  width:50px;
  background-color:black;
  position:absolute;
  left:50%;
  top:50%;
  margin: 0 auto;
}

edited Jul 08 '13 at 07:13

answered Jul 08 '13 at 06:56

RbG

3,181
3
32
43

Praveen · Answer 8 · 2013-07-08T07:22:08.237

0

Usually margin: 0 auto; does the horizontal alignment and vertical-align: middle for vertical alignment. I tried it but not working.

Try the below css

.cent {
    height: 50px;
    width: 50px;
    background: #222;
    position: absolute;
    margin: -50px 0 0 -50px;
    left: 50%;
    top: 50%;
}

Check it in JSFiddle.

To know more about the trick check Dead Center an Element.

edited Jul 08 '13 at 07:22

answered Jul 08 '13 at 06:57

Praveen

55,303
33
133
164

Center a div horizontally and vertically and keep centered when resizing the parent

8 Answers8

Markup

Linked

Related