404 image is too too low - CSS-Tricks

This topic is empty.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
April 14, 2015 at 8:36 pm #200476

Rambo
Participant

I want the 404 graphic and text to be placed in the center of the screen.

Here’s a link

April 14, 2015 at 11:07 pm #200481
Shikkediel
Participant
How about something like this :
```
body {
height: 100vh;
}

.container {
width: 960px;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 auto;
}
```
April 15, 2015 at 12:24 am #200483

Rambo
Participant

where do i add that? or do i replace the old code?

thanks for your help

April 15, 2015 at 1:40 am #200487
Paulie_D
Member
Here..
```
.error-404 {
    width: 404px;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    border:1px solid lightgrey;
}
.logo-404 {
    background-image: url(http://www.macmetro.com/wp-content/themes/macmetro/assets/logo-404.png);
    width: 384px;
    height: 216px;
    margin: 0 10px 44px 10px;
}
```
http://jsfiddle.net/xv498kL2/
April 15, 2015 at 2:06 am #200490

Shikkediel
Participant

Replacing the current code would indeed be best, @Rambo.
Many ways to get there but centering with transform would be the clue.

April 15, 2015 at 9:35 am #200514

Rambo
Participant

Thanks, I replaced that CSS and this is what happened.

Any easy fixes

April 15, 2015 at 10:40 am #200519
Paulie_D
Member
Can you be specific…it centers fine.

If you mean the border…just remove it.
```
.error-404 {
  width: 404px;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid lightgrey; /* this */
}
```
April 15, 2015 at 11:00 am #200524

Rambo
Participant

I’m sorry, this is my fault. I want the 404 image/text to be centered in the upper part of the screen so people don’t have to look down to see the image.

April 15, 2015 at 11:31 am #200526

Paulie_D
Member

So not this then….

I want the 404 graphic and text to be placed in the center of the screen.

Just adjust the top value until you get what you want….however, if it’s centered there is no reason why anybody should look down.
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The forum ‘CSS’ is closed to new topics and replies.