Question

我有一个简单的SVG元素，其高度和宽度等于80%。我还在元素上应用了10%的边距，以便在页面上居中SVG。但是，由于某些奇怪的原因，边距似乎是创建y-overflow，以便页面可滚动。这没有多大意义，因为我应用的样式应该垂直和水平加起来不超过100%。这是我的代码：

html, body {height: 100%;}

* {
  margin: 0;
  padding: 0;
}

svg {
  margin: 10%;
  height: 80%;
  width: 80%;
  background: #ddd;
}

svg path {
  fill: none;
  stroke: #000;
  stroke-linejoin: round;
  transition: 0.2s;
}

<svg viewBox="0 0 40 40">
  <path d="M15,5 l10,0 l0,10 l10,0 l0,10 l-10,0 l0,10 l-10,0 l0,-10 l-10,0 l0,-10 l10,0 l0,-10 Z" />
</svg>

基本上，我希望SVG以百分比边距为中心，我不希望主体可滚动。

提前致谢！

Answer 1

检查definition of margin。百分比边距是相对于包含块的宽度计算的。

所以你设置的顶部和底部边距太大了。因此滚动。

<强>解决方案

将未知大小的元素垂直居中非常棘手。 CSS并不容易。但是有一个小技巧可以使用as explained here。

我们的想法是使用100％高度的第二个元素，然后将两个元素垂直居中，这样较小的元素（在我们的例子中是SVG）就会居中。

＆＃13;

html, body {height: 100%;}

* {
  margin: 0;
  padding: 0;
}

svg {
  height: 80%;
  width: 80%;
  background: #ddd;
  vertical-align: middle;
}

svg path {
  fill: none;
  stroke: #000;
  stroke-linejoin: round;
  transition: 0.2s;
}

.wrapper:before {
  content: '\200B'; /* zero width space */
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
}

.wrapper {
  text-align: center;
  height: 100%;
}

＆＃13;

<div class="wrapper">

  <svg viewBox="0 0 40 40">
    <path d="M15,5 l10,0 l0,10 l10,0 l0,10 l-10,0 l0,10 l-10,0 l0,-10 l-10,0 l0,-10 l10,0 l0,-10 Z" />
  </svg>

</div>

＆＃13;

Answer 2

将overflow-y:hidden添加到正文以防止其滚动。以下是下面的代码段。

html,
body {
  height: 100%;
}

body {
  overflow-y: hidden;
}

* {
  margin: 0;
  padding: 0;
}

svg {
  margin: 10%;
  height: 80%;
  width: 80%;
  background: #ddd;
  top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position:absolute;
}

svg path {
  fill: none;
  stroke: #000;
  stroke-linejoin: round;
  transition: 0.2s;
}

<svg viewBox="0 0 40 40">
  <path d="M15,5 l10,0 l0,10 l10,0 l0,10 l-10,0 l0,10 l-10,0 l0,-10 l-10,0 l0,-10 l10,0 l0,-10 Z" />
</svg>

SVG Element的奇数边距

2 个答案: