How to center align three SVG files on the page?

Question

I have three separate SVG files that when layered on top of each other create a graphic. The first SVG file is a red triangle, the second is a blue circle located inside the triangle, and the third is a purple rectangle located at the base of the triangle (with a little space between the triangle and rectangle). My goal is to have all three SVG files on top of each other in the center of the page. Below is my HTML and CSS code. *{margin:0;padding:0;box-sizing:border-box;}.graphic{height:1

P粉860897943 · Answer

To center align and cover three SVG files, you can use Flexbox and absolute positioning. Here is an updated version of the HTML and CSS code:

* {
  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

An outer div with class "graphic" aligns the SVG file horizontally and vertically using Flexbox. This ensures they are placed in the center of the page.

The position of each SVG file is set to an absolute position to allow them to overlap each other.

The circular SVG file is centered within its parent div, using margin: auto and setting all sides (top, right, bottom, left) to 0. This centers the circle horizontally and vertically within the triangle.

Use the Bottom property to position the rectangular SVG file at the bottom. You can adjust the value of "bottom" to increase or decrease the space between triangles and rectangles.

P粉693126115 · Answer

Just put them all in the same grid row and column.

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