Let’s visit the comment-box.

I like to use transform: translate(-50%, -50%) to center any content in a matter of few coding lines. transform: translate is one of the CSS property which is commonly used to center an element both horizontally and vertically within its container. It works by shifting the element’s position in relative to itself instead of its parent.

To achieve that centering position, the element much be position: absolute or fixed. There are two other pieces of CSS that are needed to make it work is top:50% and left:50%, which moves the top-left corner of the element to the center of its parent element. And lastly, transform: translate(-50%, -50%) moves back the element by 50% of its own height and width to, making sure it is exactly in the center of the parent element.

Example of centering element using CSS Property

.comment-box {
  height: 300px;
  width: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}