Home  >  Article  >  Web Front-end  >  Several methods for centering DIV_html/css_WEB-ITnose

Several methods for centering DIV_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:47:331192browse

1.

1 body{  2 text-align:center;  3 } 

Disadvantage: All content in the body is centered

2.

.center{position: fixed;left: 50%;}

Disadvantages: Need to set the position attribute, which can easily disrupt the page layout when the web page is complex, and only the starting position of the element is centered

3 .

1 .center{2 width:500px;3 margin: 0 auto;4 }

Disadvantage: need to set div width

4.

1 .center {  2   display: -webkit-flex;  3   -webkit-justify-content: center;  4   -webkit-align-items: center;  5  }  

Disadvantage: need to support Html5

5.

1     .center {2         position: absolute;3         top: 50%;4         left: 50%;5         -ms-transform: translate(-50%,-50%);6         -moz-transform: translate(-50%,-50%);7         -o-transform: translate(-50%,-50%);8         transform: translate(-50%,-50%); 9     }

Disadvantages: Need to support Html5

6.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn