Align center isn't working

Question

I'm trying to align the text inside my div both horizontally and vertically, but it's only aligning horizontally. Everything I try doesn't work... here's my css code:

#loading > h1 {
  text-align: center;
  font-size: 21px;
  animation: fadeUpIn 3s;
  -webkit-animation: fadeUpIn 3s; /* Safari and Chrome */
}

@-webkit-keyframes fadeUpIn /* Safari and Chrome */
{
  from { opacity:0; top:150px; }
  to { opacity:1; top: 70px; }
}
#loading{
  position: absolute; top: 0; left: 0;
  width:100%;
  height: 100%;
  background-color: gray;
  color: white;
  opacity: 1;
  transition: 1s;
  visibility: visible;
}
#loading.hidden{
  opacity: 0;
  visibility: hidden;
}

My html code:

<div id="loading">
<h1>Creative. Simple.</h1>
</div>

JS fiddle of the whole website: https://jsfiddle.net/sjyoqdqy/

[`text-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) only aligns inline content within a parent block. It won't center a block vertically. Is that what you're trying to accomplish? — showdev, Jul 06 '17 at 19:34
Possible duplicate of [How to center an element horizontally and vertically?](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) Also see [CSS center text (horizontally and vertically) inside a div block](https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block) — showdev, Jul 06 '17 at 19:35
It might help if you show us the different things you've tried and what goes wrong. Someone might be able to help troubleshoot. — showdev, Jul 06 '17 at 19:38

trevorp · Accepted Answer · 2017-07-06T21:14:48.113

1

I'd suggest adding this CSS to #loading > h1:

#loading > h1 {
  position: absolute;
  top: 48%;
  left: 0;
  right: 0;
  margin: 0;
}

Then update the animation position to be consistent:

@-webkit-keyframes fadeUpIn /* Safari and Chrome */
{
  from { opacity:0; top:58%; }
  to { opacity:1; top: 48%; }
}

Fiddle for an example: https://jsfiddle.net/sjyoqdqy/6/

edited Jul 06 '17 at 21:14

answered Jul 06 '17 at 19:35

trevorp

1,161
1
14
19

1

It seems to be working for me in the fiddle that I provided above. What issue are you still seeing? – trevorp Jul 06 '17 at 19:39
Id like it to have centered both vertically and horizontaly. – Daniel Sushik Jul 06 '17 at 21:08
1

I've just updated my answer to include the animation position: (https://jsfiddle.net/sjyoqdqy/6/) – trevorp Jul 06 '17 at 21:16

score -1 · Answer 2 · answered Jul 06 '17 at 19:40

-1

#loading {
   ...
   display: table;
 }
#loading h1 {
   ...
   display: table-cell;
   vertical-align: middle;
}

answered Jul 06 '17 at 19:40

NIck

21
4

Align center isn't working

2 Answers2