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?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.