Today's study encountered in the vertical center of the problem, online a search at least 8 different methods, I only try to use absolute positioning method. This test does not matter, a try on the confused force. Let me tell you about the problems I have encountered.
I was just beginning to try this:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title>One</title> </Head> <stylerel= "stylesheet"type= "Text/css">Body{Background-color:Pink;position:relative; }#box1{Background-color:Red;Border:1px solid #ddd;Border-radius:15px;Box-shadow:0 3px 18px rgba (0,0,0,.5);width:150px;Height:100px;margin:Auto;position:Absolute; Left:0;Top:0; Right:0;Bottom:0; } </style> <Body> <DivID= "Box1"> </Div> </Body></HTML>
Shown below:
The DIV element ran up the top and showed only part of it.
The study took place one afternoon and finally found out the problem. The problem is that I set the position:relative to the BODY element. The following explains why the display occurs.
First, let's look at the following example:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>Absolute positioning element Testing</title> <styletype= "Text/css">Div#div1{position:relative;width:100px;Height:50px;background:Silver; }P.P1{
background:Green;padding:0;margin:0;Line-height:1em;width:40px;Height:50px;position:Absolute; } </style> </Head> <Body> <DivID= "Div1"> <Pclass= "P1">We were hero.</P> </Div> </Body> </HTML>
Shown below:
Delete the code in the above code that declares the height of the div element, showing the result as follows:
From the actual results above, the absolute positioning element can not open its containing block, that is, to clear the declaration contains the height of the block, otherwise just want to use absolute positioning elements to open the containing block and make it has height is not possible.
Back in the first example, when I set the BODY element to relative positioning, it becomes the containing block of the absolutely positioned DIV element, and I do not set the height of the body element, so at this point he has a height of 0, but note that at this point it is width (the body element is not height, Why is the background color of the BODY element? This is actually the background color of the HTML element, I did not set the background color for the HTML element, so he used the background color of the BODY element. If you don't believe it, you can set another background color for the HTML element, which will no longer show the background color of the BODY element.
The BODY element has no height, and I set the absolute position of the div's top and bottom to 0, while margin is auto. To satisfy top and bottom, the browser can only calculate values of margin-top and margin-bottom that are set to auto-fetch values. In the case where I set the div element height to 100px and the border width to 1px, how much margin-top and Margin-bottom are to be In order to make its upper and lower margins outside the outer boundary of the BODY element from the upper and lower padding (here is actually 0) outer boundary (in this case, the two boundaries are coincident) is 0? The answer is -51px. Why? Because the BODY element has a height of 0 Ah!
Horizontally because the body is width, the browser sets the DIV element's margin-left and margin-right to (the Body element content area width-div element content area width)/2, so the horizontal direction of the div element is centered.
So how do you get the DIV elements to be centered vertically?
There are three ways to do this:
The first method, without changing the other code, sets the height of the body element so that it is at least not less than the height of the viewport maximization.
The second method, without changing the other code, sets the DIV element's margin-top and Margin-bottom values to half its height, margin-left and margin-right to Auto. This method is actually flawed if the div element size is too small to look vertically or not centered relative to the large browser viewport.
(see here, for the above two methods actually replace the inclusion block BODY element with other block-level elements, you can achieve the absolute positioning of the DIV element in other elements of the horizontal vertical center.) ）
The third method removes the position property of the body element, and the other code does not change. The containing block of the absolutely positioned DIV element is the root element, the HTML element, the height of the HTML element, which is the height of the browser viewport (just conjecture, no validation), and the principle, like the first method, is to explicitly include the height of the block. This is also the online popular method.
PS: Use absolute positioning to align elements horizontally vertically, and be sure to define the height of the absolutely positioned element.
Questions about using absolute positioning to center elements vertically
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
