Vertically center a div

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

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?

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

1 Like

Are you working on the Rothko painting challenge?

1 Like


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


.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.

Yeah I’m working on the Rothko painting challenge.

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

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

Please upload it here.

I’ve already uploaded the code above?