How to center a balloon | Using HTML CSS
This method uses the position: absolute; and left: 50%; properties for the .balloon elements to place them in the middle horizontally. You also need to use the transform: translateX(-50%); property to adjust their position.
The position: absolute; property makes the elements positioned relative to their nearest positioned ancestor. This means that they are removed from the normal flow of the document and can be moved anywhere on the page.
The left: 50%; property sets the left edge of the elements to be 50% of the width of their parent element. This means that they are moved halfway across the parent element.
The transform: translateX(-50%); property applies a 2D transformation to the elements, moving them along the X-axis by a percentage of their own width. This means that they are shifted back by half of their own width.
The combination of these properties makes the elements centered horizontally, because they are moved to the middle of their parent element and then adjusted by their own width.
code html
code css
result
