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 inside the triangle, and the third is a purple rectangle at the base of the triangle (with a little space between the triangle and the 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: 100vh;
width: 100vw;
background-color: palegreen;
display: grid;
place-items: center;
position: relative;
}
.triangle{
position: absolute;
}
.circle{
position: absolute;
top:0;
}
.rectangle{
position:relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Graphic-center</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="graphic">
<div>
<img src="stackoverflow/SVG/triangle.svg" class="triangle" width="150px"/>
</div>
<div>
<img src="stackoverflow/SVG/circle.svg" class="circle" width="150px"/>
</div>
<div>
<img src="stackoverflow/SVG/rectangle.svg" class="rectangle" width="150px"/>
</div>
</div>
</body>
</html>
As you can see in my CSS, I tried using --position:absolute; and position:relative; - but I still can't get them to overlap each other correctly in the center of the page. Keep in mind that I will be using @keyframes to animate the SVG files once they are properly centered, and I will need to animate them individually (unless there is another way), so the position of each SVG file cannot be fixed on the page ( i.e. I need to be able to move them). Can anyone help? Thanks in advance.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 */ }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.
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; }