How to center div with css

CSS is an essential part of front-end development, and centering a DIV is a common requirement. Today, we will discuss how to center a DIV using CSS.

First of all, let's take a look at the two cases of DIV centering. One is that the DIV is centered in the browser window, and the other is that the DIV is centered in the container in which it is located.

The first case is that the DIV is centered in the browser window. We can achieve this through the following methods.

Method 1: Use absolute positioning and margin

First, we set the DIV to absolute positioning (position: absolute;), and set the four directions of left, top, right, and bottom. is 0, making it fill the entire browser window. Then, we set the margin attribute to auto to center the DIV both horizontally and vertically, as shown below:

div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

Method 2: Use flexbox layout

flexbox ( Flexible layout) is a very popular layout method, which can easily achieve vertical and horizontal centering. The code is as follows:

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

We set the container where the DIV is located to flexbox layout (display: flex ;), and set the align-items and justify-content properties to center, so that the DIV can be centered both vertically and horizontally.

Method 3: Use grid layout

Grid layout is a more powerful layout method than flexbox layout, and it can achieve more complex layout effects. In terms of implementing DIV centering, it can be written like this:

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

We set the container where the DIV is located to grid layout (display: grid;) and set the place-items attribute to center, so that the DIV can be centered Centered both vertically and horizontally.

The second case is that the DIV is centered in the container where it is located. We can achieve this in the following ways.

Method 1: Use the text-align attribute

If the DIV is an inline element, we can set the text-align attribute of the container where it is located to center, so that the DIV can be aligned horizontally Centered. The code is as follows:

.container {
  text-align: center;
}

div {
  display: inline-block;
}

Here we set the DIV as an inline-block element so that the width attribute can be set on it. Then, set the text-align property of the container where the DIV is located to center to center the DIV horizontally.

Method 2: Use the margin attribute

If the DIV is a block-level element, we can use the margin attribute to achieve centering. The code is as follows:

div {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

Here we set the DIV as a block-level element, and set its width to 200px and height to 200px. Then, set the left and right margins of the DIV to auto to center the DIV horizontally.

Method 3: Use flexbox layout

Similarly, we can use flexbox layout to center the DIV in the container where it is located. The code is as follows:

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

div {
  width: 200px;
  height: 200px;
}

We set the container where the DIV is located to the flexbox layout, and set both the align-items and justify-content properties to center, so that the DIV can be centered both vertically and horizontally.

To sum up, we can use the above methods to center the DIV, and choose different methods according to the specific situation. I hope this article can help you better understand and apply centering techniques in CSS.

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