There is a long-standing problem. Some time ago, when we made CSS + Div layout, we found that it was very easy to center an element horizontally. Margin: 0 auto; however, there is no feasible solution to achieve vertical center. The following are the newly discovered solutions, which are as follows:
Code
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
</Head>
<Style>
. Center {width: 200px; Height: 200px; top: 50%; left: 50%; position: absolute; margin:-100px 0 0 0-100px; Background: # ff0000}
. Div {width: 200px; Height: 200px; top: 50%; position: absolute; left: 50%; Background-color: # 0099ff}
</Style>
<Body>
<Div class = "center"> I am the real horizontal and vertical total </div>
<Div class = "Div"> I just put the vertex in the upper left corner in the center of the window. </Div>
</Body>
</Html>
The thumbnail is as follows:
Note that the center of the Red Square is the center of the browser window, or the center of the body element.
Personal Understanding:
Here, I personally understand that if the DIV element of this square is to be truly centered, it is actually necessary to center its center point, using margin:-100px 0 0-100px; so that the elements can be moved to the left by PX and then up by PX, so that the true center is centered. The green square does not use the effect of margin:-100px 0 0-100px, the red part is the effect after the offset. Can this be summarized as follows: when the negative values of margin-left and margin-top are obtained, can relative positioning be implemented in a certain sense?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
