How to set div to be centered relative to the web page in css

Css method to set div to be centered relative to the web page: 1. Use absolute layout "position:absolute;" for div, and set the values ​​of top, left, right and bottom to be equal; 2. Use absolute layout for div, And set the values ​​of top and left to "50%"; 3. Center the div through the transform attribute of CSS3.

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

How to set the div to be centered relative to the web page in css?

css to center the div

1. Use absolute layout "position:absolute;" for the div;

Method 1: For the div Use absolute layout position:absolute; and set the values ​​​​of top, left, right, and bottom to be equal, but not necessarily equal to 0; and set margin:auto

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

2. Use absolute layout for div and put top and The values ​​of left are all set to 50%;

Method 2: This method requires knowing the width and height of the div. Use absolute layout position:absolute for the div; and set the values ​​​​of top and left to 50%; 50% refers to 50% of the width and height of the page window; finally, move the div left and up, left and up The size is half the width and height of the div

{position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}

3. The div is centered through the transform attribute of css3.

Method 3: Use absolute positioning of the div: absolute, and set the values ​​of left and top to 50%. Use the CSS3 transform attribute. transform: translate (-50%, -50%)

{position:abslolute;
top:50%;
left:50%;
transform：translate（-50%，-50%）；
-webket-transform:translate（-50%，-50%）;
-ms-transform:translate（-50%，-50%）;
-moz-transform:translate（-50%，-50%）;
}

If there are two divs, and the smaller div inside is aligned horizontally, vertically, and centered relative to the larger div outside, there are several methods.

1. Use position and margin:auto to achieve. The parent element sets position: relative; the child element sets position: absolute, and sets the top, left, right, and bottom values ​​to be equal.

父元素{
position：relative；

}
子元素{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

2. Use position. The parent element sets position: relative; the child element sets position: absolute. And set top and left to 50%, and set left shift and up shift to half the size of the child element

父元素{
position：relative；
}子元素
{position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}

Use display: flex. This method requires browser compatibility settings.

{display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
align-items:center;
-webkit-align-items:center;
margin:0 auto;
}

3. Use transform: translate(). The parent element sets position: relative; the child element sets position: absolute. And set top and left to 50%. Finally set transform: translate (-50%, -50%)

父元素{
position：relative；
}子元素
{{position:abslolute;
top:50%;
left:50%;
transform：translate（-50%，-50%）；
}

Recommended learning: "css video tutorial"

The above is the detailed content of How to set div to be centered relative to the web page in css. For more information, please follow other related articles on the PHP Chinese website!