Vertically center a div

HTML-CSS
1

I know this might be silly to ask but I’m just looking for the simplest way to VERTICALLY center this green square.

GREEN SQUARE
GREEN SQUARE1852×808 25.2 KB

I’ve searched online and find transform-translate properties which i’ve tried but don’t work. Is there not a single line that would do the trick? And why isnt margin: auto enough? I thought this would automatically set the square in the vertical centre?

2

Would you mind posting your entire code and a link to the challenge page?

1 Like
3

Are you working on the Rothko painting challenge?

1 Like
4

Sure
HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Rothko Painting</title>
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="frame">
      <div class="canvas">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
      </div>
    </div>
  </body>
</html>

CSS

.canvas {
  width: 500px;
  height: 600px;
  background-color: #4d0f00;
  overflow: hidden;
}

.frame {
  border: 50px solid black;
  width: 500px;
  padding: 50px;
  margin: 20px auto;
}

.one {
  width: 425px;
  height: 150px;
  background-color: #efb762;
  margin: 20px auto;
}

.two {
  width: 475px;
  height: 200px;
  background-color: #8f0401;
  margin: auto;
}

.three {
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: green;
}

I understand I’m not following the guides exactly, I just like to experiment with things as I go along. It’s how I learn.

5

Yeah I’m working on the Rothko painting challenge.

6

Add another self-closing meta element within the head . Give it a name attribute set to viewport and a content attribute set to width=device-width, initial-scale=1.0 so your page looks the same on all devices.

As you have done this:

<meta charset="UTF-8">

add another meta element, so that you will have two meta elements on you page.

1 Like
7

Hi, thanks. You’re right I should establish good practice. Do you know how I would vertically centre this green square?

8

Please upload it here.

9

I’ve already uploaded the code above?