Question

我试图弄清楚做一个身体中心方块的最佳方法。我认为使用视口长度是一个不错的选择，但我似乎无法按照自己的方式使用它。我一直在使用的代码只是一个＆＃34;作弊代码＆＃34;而不是我要找的东西。

<!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;
}

Answer 1

您可以使用vmin单位对广场进行编码。此单位代表视口较小尺寸的1％。

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

现在你应该把它放在中心位置。垂直居中是CSS中的难点，解决方案是通过计算来实现：

/* 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;
}

您可以在此处播放：https://jsfiddle.net/tzi/ndq3v09h/

Answer 2

您可以使用vertical-padding为框设置比率。它有助于绘制一个正方形或任何矩形，能够在平均时间内调整大小并保持比例。

基本上使用伪元素（浮动或内联块）绘制正方形

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

Show＆amp;在下面运行片段以查看正方形，16/9和4/3盒子。

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

根据您查找的比率调整垂直填充。

我在这里解释过How to make a div's height proportional to its width?

你可以使用flex或table绘制中心X，Y你的方形或矩形

flex：demo基于this template使用下面的css：

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

表：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*/
}

响应中央广场

2 个答案: