Several methods for centering DIV_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:47:33
Original
1197 people have browsed it

1.

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

Disadvantage: All content in the body is centered

2.

.center{position: fixed;left: 50%;}
Copy after login

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 }
Copy after login

Disadvantage: need to set div width

4.

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

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     }
Copy after login

Disadvantages: Need to support Html5

6.

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template