Css + div horizontal center, css div Center

Css + div horizontal center, css div Center

Implement horizontal center of div content

Implementation Scheme 1: margin: 0 auto;

div{     height:100px;     width:100px;     background:red;     margin:0 auto;  }

　　

<! DOCTYPE html> 
　　
Implement div horizontal center solution 2: position: absolute; absolute positioning

div{    height:100px;    width:100px;    background:red;    position:absolute;   left:50%;   right:50%;   margin: auto;} 
Align div horizontally and vertically
Solution 1: position: fixed; fixed Positioning
div{                height:100px;                width:100px;                background:red;                position:fixed;                left:0;                top:0;                bottom:0;                right:0;                margin:auto;            }
Solution 2: position: absolute; absolute positioning
div{                height:100px;                width:100px;                background:red;                position:absolute;                left:0;                top:0;                bottom:0;                right:0;                margin:auto;            }

Solution 2: css3 + position;
div{                height:100px;                width:100px;                background:red;                position:absolute;                left:50%;                top:50%;                transform:translate(-50%,-50%);            }
Transform is a new property of css3. Therefore, it must be prefixed and compatible with mobile phones and other browsers. For example
-ms-transform:translate(-50%,-50%); /* IE 9 */-moz-transform:translate(-50%,-50%); /* Firefox */-webkit-transform:translate(-50%,-50%);/* Safari and Chrome */-o-transform:translate(-50%,-50%); /* Opera */