Common center methods in css and css Center

Common center methods in css and css Center

In the front-end interview, Metropolis asked you about the method of div center:

If the text is not good, I just want to give a few words to summarize it,

However, in the future, it will certainly be better.

Today we will detail several methods:

1. Use position: absolute to set the properties of left, top, margin-left, and margin-top.

 1 .one{ 2            position:absolute; 3            width:200px; 4            height:200px; 5            top:50%; 6            left:50%; 7            margin-top:-100px; 8            margin-left:-100px; 9            background:red; 10 }

This method is compatible with almost all browsers. The disadvantage is that the fixed width and height are required.

2. Use position: fixed to set the attributes of left, top, margin-left, and margin-top.

 1 .two{ 2             position:fixed; 3             width:180px; 4             height:180px; 5             top:50%; 6             left:50%; 7             margin-top:-90px; 8             margin-left:-90px; 9             background:orange;10 }

As we all know, position: fixed and IE do not support this attribute.

3. Do not forget the position: fixed attribute, margin: auto.

 1 .three{ 2             position:fixed; 3             width:160px; 4             height:160px; 5             top:0; 6             right:0; 7             bottom:0; 8             left:0; 9             margin:auto;10             background:pink;11 }

4. Use the position: absolute attribute to set top/bottom/right/left

.four{            position:absolute;            width:140px;            height:140px;            top:0;            right:0;            bottom:0;            left:0;            margin:auto;            background:black;}

5. Use the display: table-cell attribute to vertically center the content

1 .five{2             display:table-cell;3             vertical-align:middle;4             text-align:center;5             width:120px;6             height:120px;7             background:purple;8 }

6. The simplest way to center row elements is to use the line-height attribute.

1 .six{2             width:100px;3             height:100px;4             line-height:100px;5             text-align:center;6             background:gray;7  }

This method is also very practical, for example, to align the vertical center of the text

7. Use the display:-webkit-box attribute of css3, and then set-webkit-box-pack: center/-webkit-box-align: center

1 .seven{2             width:90px;3             height:90px;4             display:-webkit-box;5             -webkit-box-pack:center;6             -webkit-box-align:center;7             background:yellow;8             color:black;9 }

8. Use the new property transform: translate (x, y) of css3.

 1 .eight{ 2             position:absolute; 3             width:80px; 4             height:80px; 5             top:50%; 6             left:50%; 7             transform:translate(-50%,-50%); 8             -webkit-transform:translate(-50%,-50%); 9             -moz-transform:translate(-50%,-50%);10             -ms-transform:translate(-50%,-50%);11             background:green;12 }

This method does not need to be set to a fixed width or height. It will be used more on the mobile end and be compatible with css3 on the Mobile End.

9. Use the before element.

.nine{            position:fixed;            display:block;            top:0;            right:0;            bottom:0;            left:0;            text-align:center;            background:rgba(0,0,0,.5);}.nine:before{            content:'';            display:inline-block;            vertical-align:middle;            height:100%;} .nine .content{            display:inline-block;            vertical-align:middle;            width:60px;            height:60px;            line-height:60px;            color:red;            background:yellow;}

This method in my previous article has a detailed introduction: http://www.cnblogs.com/White-Quality/p/4530867.html