How to center div in css

How to center a div in css: 1. Use absolute layout "position:absolute;" for the div; 2. Use absolute layout for the 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 article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

In the XHTML website design standards, table positioning technology is no longer used, but css div is used to achieve various positioning. Let’s look at several ways to center a div using CSS.

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

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.

## where margin-left: -100px and margin-top: -100px can be written as margin: -100px 0px 0px -100px

[Recommended learning:

css video tutorial】

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

The effects of the above three methods are shown below

If there are two divs, the smaller div inside will There are several ways to align the large div outside horizontally and vertically in the center.

• 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.

• 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 to half the size of the child element.

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

• 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%).

The renderings of the above four methods are shown below

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