如何在页面上居中对齐三个 SVG 文件？

Question

我有三个独立的SVG文件，当它们彼此层叠时，它们将创建一个图形。第一个SVG文件是一个红色三角形，第二个是位于三角形内部的蓝色圆圈，第三个是位于三角形底部的紫色矩形（三角形和矩形之间有一点空间）。我的目标是将所有三个SVG文件在页面中央相互叠加。下面是我的HTML和CSS代码。*{margin:0;padding:0;box-sizing:border-box;}.graphic{height:1

P粉860897943 · Answer

要居中对齐并覆盖三个 SVG 文件，您可以使用 Flexbox 和绝对定位。以下是 HTML 和 CSS 代码的更新版本：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.graphic {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: palegreen;
  position: relative;
}

.triangle, .circle, .rectangle {
  position: absolute;
}

.circle {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.rectangle {
  bottom: 20px; /* Adjust this value to add space between the triangle and rectangle */
}




    
    
    
    Graphic-center

具有“graphic”类的外部 div 使用 Flexbox 水平和垂直居中对齐 SVG 文件。这确保它们被放置在页面的中心。

每个 SVG 文件的位置都设置为绝对位置，以允许它们相互重叠。

圆形 SVG 文件在其父 div 内居中，使用 margin: auto 并将所有边（上、右、下、左）设置为 0。这使圆在三角形内水平和垂直居中。

使用 Bottom 属性将矩形 SVG 文件定位在底部。您可以调整“bottom”的值来增加或减少三角形和矩形之间的空间。

P粉693126115 · Answer

只需将它们全部放在同一网格行和列中即可。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.graphic {
  background-color: palegreen;
  display: grid;
  place-items: center;
  grid-template-columns: 100vw;
  grid-template-rows: 100vh;
}

.triangle {
  z-index: 2;
}

.circle,
.rectangle,
.triangle {
  display: block;
  grid-column: 1;
  grid-row: 1;
}