Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Vertical </title>
<style type= "Text/css" >
#content {
Position:absolute;
top:0;
bottom:0;
left:0;
right:0;
Margin:auto;
height:240px;
width:70%;
Background-color: #ccc;
}
/* Method 1 IE8 The following is not compatible
. main{width:1000px; margin:0 Auto;}
. layout{position:relative; float:left; width:500px; border:1px solid #f00; height:aoto;}
. layout. box{Position:absolute;
top:0;
bottom:0;
left:0;
right:0;
Margin:auto;
width:100px;
height:240px; Background: #000;} */
/* Method 2, adaptive width and height, compatible with all browsers */
div.layout1{position:relative; float:left; left:50%;}
div.box1{position:relative; float:left; right:50%; border:1px solid #f00;}
</style>
<body>
<!--one, single-line content centered Line-height
Advantages:
1. Supports both block-and inline-pole elements
2. Support all browsers
Disadvantages:
1. Only one row can be displayed
2. The center of etc. is not supported in IE
It is important to note that:
1. Use relative height to define your height and line-height
2. Don't want to ruin your layout, Overflow:hidden must
Two, multi-line content center, and container height variable padding-top padding-bottom
Advantages:
1. Supports both block-and inline-pole elements
2. Support for non-textual content
3. Support all Browsers
Disadvantages:
Container cannot be fixed height
Third, the container as a table unit display:table; >display:teble-cell;
CSS provides a range of Diplay property values, including Display:table, Display:table-row, Display:table-cell, and so on, to display elements as table cells. This is combined with vertical-align:middle, just like the valign= "center" in the table.
It is important to note that the Display:table-cell element must appear as a descendant of the display:table element, as is the case with a legal <td> element that must be in the <table>.
Advantages:
Needless to say, it's the table, and the effect is exactly the form.
Disadvantages:
Invalid under IE
Iv. This method inserts a div outside the content element. Set this div height:50%; Margin-bottom:-contentheight;.
The content clears the float and appears in the middle.
<div id= "Floater" ></div>
<div id= "Content" >
Content here
</div>
#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}
Advantages:
Applies to all browsers
Content is not truncated when there is not enough space (for example: Window Zoom out), scroll bar appears
Disadvantages:
The only thing I can think of is the need for extra empty elements (and not so bad, another topic)
V. This method uses a Position:absolute, with a fixed width and height of the div. This div is set to top:0; bottom:0;. But because it has a fixed height, in fact, it can not and up and down the spacing of 0, so margin:auto; will make it centered. Using Margin:auto to center the block-level elements vertically is straightforward.
#content {
Position:absolute;
top:0;
bottom:0;
left:0;
right:0;
Margin:auto;
height:240px;
width:70%;
}
Advantages:
Simple
Disadvantages:
Invalid in IE (IE8 beta)
When there is not enough space, the content is truncated, but no scroll bars appear
///
This method uses an absolutely positioned DIV to set its top to 50%,top margin set to negative content height. This means that the object must specify a fixed height in the CSS.
Because there is a fixed height, you might want to assign a overflow:auto to the content so that if there is too much content, a scrollbar will appear to avoid content overflow.
<div>
Content goes here</div>
#content {
Position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* Negative half of the height */
}
Advantages:
Applies to all browsers
No nested tags required
Disadvantages:
When there is not enough space, the content disappears (similar to the div within the body, when the user shrinks the browser window, the scrollbar does not appear)
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>center</title>
<style type= "Text/css" >
. p{position:relative; float:left; left:50%;}
. c{position:relative; float:left; right:50%; border:1px solid #f00;}
. p1{position:relative; width:800px; height:600px; border:1px solid #f00;}
. c1{Position:absolute; width:500px; height:300px; top:50%; left:50%; margin:-150px 0 0-250px; background: #000;}
</style>
<body>
<div>
<div>cccccccc</div>
</div>
<div>
<div>c1c1c1c1c1c1</div>
</div>
</body>
-
<div class= "" >
<div id= "Content" >center</div>
</div>
<div>
<div class= "Layout layout1" >
<div class= "box Box1" >
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
</div>
</div>
</div>
</body>
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
