How can you centre text vertically and horizontally inside a box?

Question

Accepted Answer

There are several ways to center text both vertically and horizontally inside a container. The best method depends on whether the container has a fixed height or uses flexible layout systems like Flexbox or Grid. Using Flexbox: Set the container to `display: flex`, then use `justify-content: center` for horizontal alignment and `align-items: center` for vertical alignment. Using Grid: Set the container to `display: grid` and use `place-items: center` to center content both vertically and horizontally. Using Positioning: With `position: relative` on the container and `position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)` on the text, you can center it regardless of container size. Using Line Height: For single-line text in a fixed-height box, set `line-height` equal to the container height to center vertically and use `text-align: center` for horizontal centering. .box {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  width: 300px;
  height: 150px;
  border: 2px solid black;
  background-color: lightblue;
} .box {
  display: grid;
  place-items: center; /* centers content vertically and horizontally */
  width: 300px;
  height: 150px;
  border: 2px solid black;
  background-color: lightgreen;
} .container {
  position: relative;
  width: 300px;
  height: 150px;
  border: 2px solid black;
}
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} These methods allow precise vertical and horizontal centering, whether you have dynamic content, multiple lines of text, or responsive layouts. Flexbox and Grid are the most flexible and recommended methods for centering content. Absolute positioning works well for fixed-size containers or overlay elements. Line-height method is limited to single-line text with a fixed container height. Always test centering in responsive scenarios to ensure consistent alignment.

How can you centre text vertically and horizontally inside a box?

Centering Text in a Box Using CSS

How can you centre text vertically and horizontally inside a box?

Centering Text in a Box Using CSS

Scenario Questions

Follow-up Questions