css3で演算が出来るcalc()と、viewportの値を示す[vw,vh,vmin,vmax]を使います。 .squareBox { width: calc(100vmin - 60px); height: calc(100vmin - 60px); position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } 解説 要素の縦横に 100vmin を付与し、幅と高さの値の小さい方を指定します。 例えば、ウィンドウサイズが{ 幅:800px, 横:600px }であれば width、heightは600pxになります。 そこからcalc()を使用して -60px としています。 これは、左右、または上下に常に30pxの余白を取るためです。 position から下は要素を中央に配置するための指定になります。