CSS Layout – Horizontal & Vertical Align

In CSS, there are several ways to horizontally and vertically align elements within a container. Here are some of the most common techniques:

1. Using Flexbox: Flexbox is a modern layout technique that makes it easy to align elements both horizontally and vertically. To use Flexbox for alignment, you can set the display property of the container to flex, and then use the justify-content and align-items properties to control the horizontal and vertical alignment, respectively. For example:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

This code will horizontally and vertically center all the child elements of the container.

2. Using Absolute Positioning: Another way to align elements is by using absolute positioning. To do this, you can set the position property of the element to absolute, and then use the top, bottom, left, and right properties to position it relative to its parent container. For example:

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

This code will position the element at the center of its parent container both horizontally and vertically.

3. Using Table Display: You can also use table display properties to align elements. For example, you can set the display property of the container to table and the display property of the child elements to table-cell, and then use the vertical-align property to control the vertical alignment. For example:

.container {
  display: table;
}
.element {
  display: table-cell;
  vertical-align: middle;
}

This code will vertically center all the child elements of the container.

4. Using Line-Height: One simple way to vertically align text within an element is by using the line-height property. If you set the line-height property to the same value as the height property, the text will be vertically centered within the element. For example:

.element {
  height: 100px;
  line-height: 100px;
}

This code will vertically center the text within the element. However, note that this technique only works for single-line text, and may not be suitable for more complex layouts.

Overall, there are several ways to align elements in CSS, and the best technique to use will depend on the specific requirements of your layout.