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.

css video tutorial】

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