why won't my element stay centred at all times?

Question

I need my div with the id "splashlogo" to stay centred of my document at all times. I have tried so many different things but not sure why its not working. Can anyone help?

.splashscreenlogo {
  position: absolute;
  top: 42%;
  left: 25%;
}

<div class="splashscreenlogo">
  <div id="splashlogo">
    <img src="logo_splashscreen.png" alt="Splashscreen logo">
  </div>
</div>

...and see the [excellent answer](http://stackoverflow.com/a/19461564/17300) to that question. — Stephen P, May 08 '15 at 21:12

Sai Deepak · Answer 1 · 2015-05-08T20:26:01.693

1

You can do it in this way

Say for example if your image height is 100px and image width is 100px you can always center it like this

<div class="splashscreenlogo">
  <div id="splashlogo">
    <img src="logo_splashscreen.png" alt="Splashscreen logo" width=655 height=138>
  </div>
</div>

.splashscreenlogo {
  position: absolute;
  top: 50%;
  left: 50%;
    margin-top: -69px;
    margin-left: -327.5px
}

Refer Fiddle

edited May 08 '15 at 20:26

answered May 08 '15 at 20:09

Sai Deepak

678
4
16

my image is 655px(wide) by 138px(tall)? – Clarke May 08 '15 at 20:17
I have edited refer the fiddle and try it locally since the fiddle area is too small it will not look exactly check it out and let me know – Sai Deepak May 08 '15 at 20:26

score 1 · Answer 2 · answered May 08 '15 at 20:10

1

Considering the div has display as block you can use something like this

<div class="splashscreenlogo">
  <center>
  <div id="splashlogo">
    <img src="logo_splashscreen.png" alt="Splashscreen logo">
  </div>
  </center>
</div>

Or Something Like This

<div class="splashscreenlogo" style="text-align:center">

  <div id="splashlogo">
    <img src="logo_splashscreen.png" alt="Splashscreen logo">
  </div>

</div>

Or Something Like This

<div class="splashscreenlogo" style="margin:0 auto">

  <div id="splashlogo">
    <img src="logo_splashscreen.png" alt="Splashscreen logo">
  </div>

</div>

answered May 08 '15 at 20:10

Raj Nandan Sharma

3,694
3
32
42

The top one was great however it only sat centred horizontally. Do I need to put something so it stay centred vertically too? – Clarke May 08 '15 at 20:28
1

. To use this you div splashscreen should have height more than center which has the image – Raj Nandan Sharma May 08 '15 at 20:38

score 1 · Answer 3 · answered May 08 '15 at 20:20

If you have a full splash screen, which it sounds like you do, I would use the transform trick.

The important thing here is that this solution does not need to know the size of your splash image- you don't need to change your CSS to accommodate a differently sized splash image.

The CSS is quite simple for this- basically you position the upper left corner absolutely at 50%, 50%; then transform the image by half of it's width and height to effectively move the center of the object to that window midpoint.

#splashlogo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}


/* Page styling, ignore this */
body {
  background-color: #bada55; }
img {
  box-shadow: 6px 6px 3px rgba(0,0,0,0.25); }

<div class="splashscreenlogo">
  <div id="splashlogo">
    <img src="http://www.placecage.com/300/300" alt="Splashscreen logo">
  </div>
</div>

score 0 · Answer 4 · 2015-05-08T20:13:13.453

0

Make sure your absolute div is within a relative container first then.

#splashlogo {
  position:relative;
}

.splashscreenlogo {
  position: absolute;
  width:*yourwidth*
  height:*yourheight*
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin:auto;
}

You will also want some width & height in there for the absolute method.

edited May 08 '15 at 20:13

answered May 08 '15 at 20:07

score 0 · Answer 5 · answered May 08 '15 at 20:09

0

I usually use margin: 0 auto or you can also use left: 50%. This is for horizontal centering. For vertical centering you can use top: 50% or line-height.

answered May 08 '15 at 20:09

Tadeáš Jílek

2,813
2
19
32

Ashesh · Answer 6 · 2015-05-08T20:35:02.890

This will keep the slapshlogo centered, both horizontally and vertically under most circumstances, even on vertical re-size.

.splashscreenlogo {
  height: 300px;
  width: 300px;
  background: #fff; /*#fff for white background*/
  position: absolute;
  /*margin property shorthand notation*/
  margin: -150px 0 0 -150px;
  left: 50%;
  top: 50%;
}
#splashlogo {
  height: 100px;
  width: 100px;
  background: #fff; /*#fff for white background*/
  position: absolute;
  /*margin property shorthand notation*/
  margin: -50px 0 0 -50px;
  left: 50%;
  top: 50%;
}

<div class="splashscreenlogo">
  <img id="splashlogo" src="http://www.clker.com/cliparts/o/i/x/2/k/G/ink-splash-with-drops-black-hi.png" alt="Splashscreen logo">
</div>

source: How to Center Anything With CSS

why won't my element stay centred at all times?

6 Answers6