To center a div horizontally and vertically, 1. It is recommended to use Flexbox: set the container display: flex, and cooperate with justify-content and align-items as center; 2. Use Grid layout: set display: grid and place-items: center; 3. Traditional methods can use positioning and transform: set left and top to 50% and translate (-50%, -50%); note that the container must have a clear height, reasonably set parent positioning, and consider content overflow processing.

Wanting a div to center horizontally and vertically in the page is actually a common CSS requirement. There are many ways to implement it, but the easiest, modern and practical way is to use Flexbox or Grid layouts.

Centering with Flexbox (recommended)

Flexbox is one of the most commonly used methods at present, especially suitable for alignment operations in one-dimensional layout.

 .container {
  display: flex;
  justify-content: center; /* horizontal center*/
  align-items: center; /* vertical center*/
  height: 100vh; /* The container must have a height*/
}

After this setting, the child elements in .container will be automatically centered.

Note: If the parent container does not have a clear height, such as just writing height: 100% , then make sure its upper element has actual height, otherwise it may not take effect.

Centering with Grid (another modern solution)

CSS Grid can also be easily centered:

 .container {
  display: grid;
  place-items: center;
  height: 100vh;
}

This is written in a simpler way, place-items is the abbreviation of align-items and justify-items .

Traditional method: Positioning transform

If you need to be compatible with some old browsers, or just want to use absolute positioning to control it, you can use the following method:

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

This method is suitable for elements that are separated from the document flow, such as pop-up windows, prompt boxes, etc. However, remember to set position: relative to the parent container, otherwise the positioning will be based on the viewport.

Pay attention to the small details

• If you use flex or grid , be aware that they affect how the child elements are arranged, and additional spacing may be required.
• In responsive design, too much content in the centered element may exceed the screen range, remember to add overflow control.
• text-align and line-height can also be centered, but that's another matter.

Basically, just choose one that suits your current project structure.

The above is the detailed content of How to center a div horizontally and vertically using css. For more information, please follow other related articles on the PHP Chinese website!