How to center display css div

Css div center display method: 1. Use absolute absolute positioning, the code is [

]; 2. Use translate positioning; 3. Use margin to center positioning; 4. Use Fixed centered positioning.

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

Css div center display method:

1. Absolute absolute positioning This is our most commonly used center positioning writing method. It requires that the width and height of the div must be determined. Currently on the market Browsers on the Internet basically support this writing method

     
  
我是absolute居中定位
  

2. Translate positioning This is the attribute of css3 transform that is positioned through its own offset, and it has a great advantage that it does not need to know the width and height of the div. Just like this self in js, you can set the width and height as a percentage. IE browser

      
  
我是translate居中定位
  

3. Margin is centered. There is no need to determine the width and height of the div to allow top and bottom. , left and right are both 0 and add margin:auto. A stroke of genius IE browser< IE 8 does not support

      
  
我是margin居中定位
  

4. Fixed center positioning is probably most commonly used to center the navigation bar. The display does not scroll with the page

      
  
我是fixed居中定位
  

Recommended related tutorials:CSS video tutorial

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