Responsive central square

Question

I am trying to figure out the best way to do a central square of a body. I thought that it would be a good choice to use the viewport-length but I can't seem to get it my way. The code I have been using is just a "cheat code" and not what I am looking for.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
</head>
<body>
<section class="main">
</section>
</body>
</html>

body{

position: relative;
margin: 0;
padding: 0;
font-family: Open Sans, sans-serif;
background-color: #d0d2d1;
}

.main{

text-align: center;
width: 65vw;
height: 35vw;
background-color: #fff;
margin-top: 150px;
margin-left: 350px;
}

Can you be a bit more explicit about what you want to get? A "central square" is quite ambiguous. What size should this square be? Do you actually mean a square? Your example obviously uses a rectangle, not a square... — jcaron, Jan 31 '16 at 22:30
is this , this kind of things you look for ? http://codepen.io/gc-nomade/pen/NxzoqR — G-Cyrillus, Jan 31 '16 at 22:32
your code says 65vwX35vw , that's not a square :) . to center this content, there is dozens of techniques display, position, transform, negative margins , etc .. actually the most efficient is display: flex,, then display:table works well if you want to include older browsers such as IE8 ... — G-Cyrillus, Jan 31 '16 at 22:37
margin: auto; "solves most of the problem like you are facing" — Deepanshu Mishra, Feb 01 '16 at 00:30

score 1 · Answer 1 · answered Jan 31 '16 at 23:33

1

You can use the vmin unit to do a code a square. This unit represents 1% of viewport’s smaller dimension.

/* A square that will always fit in a screen */
main {
  width: 70vmin;
  height: 70vmin;
}

Now you should center it. The vertical centering is the hard part in CSS, a solution is to do it with a calculation:

/* 2D centering */
/* horizontaly: margin auto */
/* verticaly: the height of the screen - the height of the content / 2 (top & bottom margins) */ 
main {
  margin: calc((100vh - 70vmin) / 2) auto;
}

You can play with it here: https://jsfiddle.net/tzi/ndq3v09h/

answered Jan 31 '16 at 23:33

tzi

8,719
2
25
45

1

if you used flex like i did, it centers itself no need of margins ;) – G-Cyrillus Jan 31 '16 at 23:49
I love flex! I just tried to propose another solution ;) – tzi Feb 01 '16 at 00:14
playing with calc() is fun too ;) – G-Cyrillus Feb 01 '16 at 00:26

score 0 · Answer 2 · edited May 23 '17 at 12:15

You can use vertical-padding to set a ratio to a box. It helps to draw a square or any rectangle that will be able to resize and preserve ratio in the mean time.

basicly with a pseudo element (floatting or inline-block) to draw a square

:before {
content:'';
padding-top:100%;/* equals width of tag */
float:left; /* or inline-block; */
}

Show & Run snippet below to see a square, a 16/9 and a 4/3 boxe.

.ratio {
  display:inline-block;
  width:25%;
  vertical-align:middle;
  background:lightgray;
  }
body {
  text-align:center;
  }
.ratio:before {
  content:'';
  display:inline-block;
  padding-top:100%;
  vertical-align:middle;
  }
.b:before {
  padding-top:56.2%;
  }
.c:before {
  padding-top:75%;
  }

<div class="ratio "> square</div>
<div class="ratio b"> 16/9 </div>
<div class="ratio c"> 4/3 </div>

adapt vertical padding for the ratio you look for.

i explained it here once How to make a div's height proportional to its width?

you may use either flex or table to draw to center X,Y your square or rectangle

flex: demo based on this template using css below :

html {
height:100%;
display:flex;
}
body {
margin:auto;
}

table: example

html {
display:table;
height:100%;
width:100%;
}
body {
display:table;
vertical-align:middle;/* will set vertically content in center */
}
#wrapper {
width:xx; /* whatever you need */
margin:auto; /* horizontal centering*/
}

Responsive central square

2 Answers2