As the front-end siege division, in the production of Web pages have encountered CSS production horizontal vertical Center, I think we have studied or written, especially the vertical center, but also let people worry. During this time, I have collected several different ways to make vertical centering method, but each method has its own merits, it is not easy to choose the right choice. I will introduce some of these methods to you for your reference. Perhaps for beginners like me to have some help.
Using CSS to achieve the vertical centering of elements is a chore, although there are many ways to implement them, but there are a number of things that might not work properly under some browsers. Let's take a look at the advantages and disadvantages of these different approaches for vertical centering.
method One:
This method is used to achieve a single-line vertical centering is quite simple, you just have to ensure thatelement content is a single line, and its height is fixed, you just set its "line-height" to the "height" value is OK。 However, this method is too restrictive and only applies to elements of a single line of text, so this method cannot be used in multiline elements.
Html Markup
Copy CodeThe code is as follows:
<div class= "Vertical" >content</div>
CSS Code:
Copy CodeThe code is as follows:
. vertical {
height:100px;
line-height:100px;/* value equals the value of the element height */
}
Advantages:
Suitable for all browsers, when there is not enough space, the content will not be cut off
Disadvantages:
Only applies to text and pictures, and this method, when you are not a single line, the effect is very poor, poor to make you feel nauseous.
This method is useful for using small elements, such as having a button, a picture, or a single line of text fields.
Method Two:
This approach will beabsolute Positioning (Position:absolute) is set for the container, and the positioning height (top:50%) and margin-top are half the height (MARGIN-TOP:-HEIGHT/2). This means that using this method to achieve a vertical centering effect, the element must have a fixed height. In this way, you set a fixed height for the element, and if you set it to "Overflow:auto" again, then when the element content exceeds the container, the element will scroll, not the height of the content itself.
HTML Markup
Copy CodeThe code is as follows:
<div class= "Vertical" >content</div>
CSS Code
Copy CodeThe code is as follows:
. vertical {
Height of the height:100px;/* element */
Position:absolute;
The position of the top edge of the top:50%;/* element is half the height of the parent element.
Margin-top: -50px;/* set element top negative margin, size is half of the height of the element */
}
Advantages:
Able to work in various browsers, simple and straightforward structure, no need to add additional tags
Disadvantages:
Due to the height of the fixed dead element, there is no space for the foot, when the content exceeds the size of the container, either a message or a scrollbar (if the element is inside the body, the body scroll bar will not appear when the user shrinks the browser window).
This method is mainly for the multi-line element to the vertical center of the element, rather than the content of this element is vertically centered, this is to understand and separate clearly. In addition, this method is implemented by absolute positioning, so it is necessary to pay attention to the following points in order to achieve vertical centering of elements:one element positioning relates to a relative positioning reference, so make sure that the element is relative to which is the reference coordinate, and that it needs to be set to the element to determine a height value and to set a negative value for the element, and the margin-top is half the height of the element .。 Here I suggest that you set a width value for the element, because the element is absolutely positioned and out of the document stream, its width is calculated based on the width of the element content, which makes it visually better, preferably defining a width value for the element.
With this approach, we can make the element not only vertically centered, but also horizontally centered, such as:
HTML Markup
Copy CodeThe code is as follows:
<div id= "Wrap" >test</div>
CSS Code
Copy CodeThe code is as follows:
#wrap {
Width of the width:200px;/* element */
Height of the height:200px;/* element */
Position:absolute;
left:50%;/* with negative values of margin-left to achieve horizontal centering */
Margin-left: The size of the -100px;/* value equals half the width of the element */
top:50%;/* vertical centering with negative values of margin-top */
Margin-top: The size of the -100px;/* value equals half the height of the element */
}
This method can achieve the horizontal vertical center of the element, often used in the most middle of the page layout, using this method must be grasped:horizontally vertically centered elements should have a definite size (in other words, to have the exact width and height values), absolute positioning of the elements, and setting the Left,top value to "50%" (preferably in this case, if it is only horizontally centered, it can be replaced by relative positioning) And finally set the negative values of margin-top and Margin-left, and their value is half of the height and width of the element respectively .。
Method Three:
The third method is to use the div to simulate the table effect, that is, to set the "display" property of multiple <div> to "table" and "Table-cell", and set their "Vertical-align" property value to "middle". For more information about "display:table" You can click here or read Quirksmode's "The display Declaration" article.
HTML Code
Copy CodeThe code is as follows:
<div id= "Container" >
<div id= "Content" >content</div>
</div>
CSS Code
Copy CodeThe code is as follows:
#container {
height:300px;
display:table;/* let elements render in tabular form */
}
#content {
display:table-cell;/* let elements render as a single element of a table */
vertical-align:middle;/* vertical alignment using elements */
}
Advantages:
This method does not have the same height limit as the previous two methods, this method can be changed according to the content of the element dynamic height, so there is no space constraints, the content of the element is not due to lack of space to be cut off or appear ugly scroll bar.
Disadvantages:
What are the deficiencies? This method is only suitable for modern browsers and does not work properly under ie6-7, and the structure is more complex than the previous two.
This method is very convenient under the modern browser. But in ie6-7 is not supported, because display:table in ie6-7 is not supported, then in order to solve this method in ie6-7 compatibility, need to add a div, and use hack, let's look at its solution.
HTML Markup
Copy CodeThe code is as follows:
<div class= "Table" >
<div class= "TableCell" >
<div class= "Content" >content</div>
</div>
</div>
CSS Code
Copy CodeThe code is as follows:
. Table {
height:300px;/* height value can not be less than */
width:300px;/* width value can not be less */
display:table;
position:relative;
Float:left;
}
. TableCell {
Display:table-cell;
Vertical-align:middle;
Text-align:center;
padding:10px;
*position:absolute;
*top:50%;
*left:50%;
}
. Content {
*position:relative;
*top:-50%;
*left:-50%;
}
method Four:
This method is a little new, in this way you need to put an empty <div> in front of the center element (block elements can), and then set the height of the <div> is 50%,margin-bottom for the height of the element is half, and the center element needs to clear the float. It should be noted that using this method, if your center element is in the body, you need to give Html,body a "height:100%" attribute.
HTML Markup
Copy CodeThe code is as follows:
<body>
<div id= "Floater" ><!--this block has empty content--></div>
<div id= "Content" >content section</div>
</body>
CSS Code
Copy CodeThe code is as follows:
html,body {height:100%;}
#floater {
Float:left;
height:50%;/* 50%*/relative to the height of the parent element
Margin-bottom: -120px;/* value is half the height of the center element (240PX/2) */
}
#content {
clear:both;/* Clear Float */
height:240px;
position:relative;
}
Advantages:
This method can be compatible with all browsers, without the space, the content will not be cut off
Disadvantages:
The element height is fixed dead, unable to reach the content adaptive height, if the center element plus the overflow attribute, either the element appears scroll bar, or the element is cut off, and the other is not a disadvantage, it is added an empty tag.
Method Five:
This method and method of using Display:table-cell to achieve the same, but method five is different from this method we need a box-type, to achieve the effect of IE, need to add an upstream tag such as "Span" (It's best to use inline labels, never use block tags, because using block labels doesn't work), and the wire box type height is set to 100%, its implementation principle we can read the "size of the image, multi-line text horizontal vertical center."
HTML Markup
Copy CodeThe code is as follows:
<p class= "Table" >
<span class= "TableCell" >centering Multiple lines
In a block container.</span>
<!--[If LTE IE 7]><b></b><! [endif]-->
</p>
CSS Code
Copy CodeThe code is as follows:
<style type= "Text/css" >
. Table {
border:1px solid Orange;
display:table;
height:200px;
width:200px;
Text-align:center;
}
. TableCell {
Display:table-cell;
Vertical-align:middle;
}
</style>
<!--[If LTE IE 7]>
<style type= "Text/css" >
. TableCell {
Display:inline-block;
}
D =
Display:inline-block;
height:100%;
Vertical-align:middle;
width:1px;
}
</style>
<! [endif]-->
Advantages:
The advantages and methods of this method are the same, there is no high limit.
Disadvantages:
The bad part is this method in order to make IE run normally, need to add some additional tags, the other is the box type of label types are limited. But it is quite convenient to use.
method Six:
This method is used by the Display:inline-block, and then with the height of the other element to achieve the center
Html Markup
Copy CodeThe code is as follows:
<div id= "Parent" >
<div id= "Vertically_center" >
<p>i am Vertically centered!</p>
</div>
<div id= "Extra" ><!--ie comment--></div>
</div>
CSS Code
Copy CodeThe code is as follows:
<style type= "Text/css" >
Html
body{
height:100%;
}
#parent {
height:500px;/* defines the height so that the wire box type Div#extra has a reference, which can be a fixed value or a percentage */
border:1px solid red;
}
#vertically_center,
#extra {
display:inline-block;/* the element into a inline block display */
vertical-align:middle;/* Vertical Center */
}
#extra {
height:100%; /* Set the box type to the 100% height of the parent element */
}
</style>
<!--[If Lt IE 8]>
<style type= "Text/css" >
/*ie6-7 does not support display:inline-block, so another hack is written in ie6-7 to support ie6-7*/
#vertically_center,
#extra {
Display:inline;
Zoom:1;
}
#extra {
width:1px;
}
</style>
<! [endif]-->
Advantages:
Self-adapting height, easy to understand
Disadvantages:
You need to set a height for the element's parent element, which can be a fixed value or a percentage height, plus an additional label to be used as a wireframe type, such as Div#extra, and set its height to 100%. In addition, IE6-7 does not support display:inline-block and needs to write a different style for them.
This is a very interesting approach, but you need to know how to use display. For the operation of this method, you can go to see Jonathan Potter wrote "CSS, Vertical centering".
method Seven:
This method is centered on multi-line content, and the container height is variable, the method is simple, is to give the same padding value
Html Code
Copy CodeThe code is as follows:
<div class= "Columns" >
<div class= "Item" >test</div>
</div>
CSS Code
Copy CodeThe code is as follows:
. item {padding-top:30px;padding-bottom:30px;}
Advantages:
Works in all browsers, supports all elements, is easy to understand and clearly structured
Disadvantages:
Using this method does not give the container a fixed height, and if the fixed height will not achieve the effect.
method Eight:
As mentioned earlier, if the element is fixed to a vertical center, it is convenient to implement CSS, but it is tricky for adaptive height. So the seventh way is to introduce you to the method of using jquery
Html Markup
Copy CodeThe code is as follows:
<div class= "Container" >
<p>centered in the middle of the Page with jquery</p>
</div>
CSS Code
Copy CodeThe code is as follows:
. container{
width:270px;
height:150px;
}
JQuery Code
Copy CodeThe code is as follows:
$ (document). Ready (function () {
$ (window). Resize (function () {
$ ('. Container '). CSS ({
Position: ' Absolute ',
Left: ($ (window). Width ()-$ ('. Container '). Outerwidth ())/2,
Top: ($ (window). Height ()-$ ('. Container '). Outerheight ())/2
});
});
Initial run function
$ (window). Resize ();
});
Advantages:
This method, simple structure, easy to understand, does not require the size of fixed elements. Compatible with each browser.
Disadvantages:
Need to call jquery, if you do not support JS or user-Forbidden JS, then will not work properly, that is the cup.
Above this method to achieve the center layout of the page is very convenient, below I based on the idea and method two write a realization element horizontal vertical center of the small plug-in
JQuery Plugin
Copy CodeThe code is as follows:
(function ($) {
$.fn.vhalign = function () {
Return This.each (function (i) {
Gets the content height of the element
var h = Math.ceil ($ (this). Height ());
Outerheight=padding+border+height
var Oh = Math.ceil ($ (this). Outerheight ());
Get Margin-top value
var mt = Math.ceil (OH/2);
Get element width
var w = Math.ceil ($ (this). width ());
Outerwidth=padding+border+width
var ow = Math.ceil ($ (this). Outerwidth ());
Get Margin-left
var ml = Math.ceil (OW/2);
Implement element centering effect
$ (this). CSS ({
"Margin-top": "-" + MT + "px",
"Top": "50%",
"Margin-left": "-" + ml + "px",
"Left": "50%",
"width": w,
"Height": H,
"Position": "Absolute"
});
});
};
}) (JQuery);
Html Markup
Copy CodeThe code is as follows:
<div class= "Wrap" >
<p>test jquery</p>
</div>
Next you need to call the jquery plugin you just wrote
Copy CodeThe code is as follows:
<script type= "Text/javascript" src= "Vhalign.js" ></script>
Finally, you need to call this function in Div.wrap
Copy CodeThe code is as follows:
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (". Wrap"). Vhalign ();
});
</script>
One thing to note here is that if the element is not centered relative to the body, it needs to be positioned relative to its parent element.
Above we have witnessed eight different methods to achieve the vertical center of the effect of the element, below we have a simple look at how to achieve the horizontal center of the element (in fact, there are some effects also achieved horizontal center, you can slowly recall).
method One:
This method mainly uses the width of the Margin:auto mate element to achieve horizontal centering effect.
Html Markup
Copy CodeThe code is as follows:
<div class= "Horizontal" >content</div>
CSS Code:
Copy CodeThe code is as follows:
. horizontal {
width:200px;
margin:0 Auto;
}
Using the above method to achieve horizontal centering of elements make sure that the element satisfies two conditions:First , the element needs to have a fixed width value, and the Margin-left and margin-right of the second element must be set to auto, neither of which has the effect of allowing the element to be centered horizontally.。 This method uses the horizontal center, supports all browsers to run, therefore he also commonly used to achieve the Web page horizontal Center layout effect, if uses in the layout, needs to pay attention to the effect under IE, in other words, if your Web page does not have the explicit declaration "! DOCTYPE ", then the Internet Explorer will also be in the weird mode of parsing your Web page, the above method will not be able to get your page to be horizontally centered, but you can use the following methods to solve the bug.
Html Code:
Copy CodeThe code is as follows:
<div class= "container" > Page content. ... </div>
CSS Code:
Copy CodeThe code is as follows:
Body {
text-align:center;/* implement IE in weird Mode page Horizontal Center */
}
. container {
text-align:left;/* to restore text to left alignment */
width:960px;/* Set Page Total width */
margin:0 auto;/* to align the page horizontally */
}
Method Two:
To achieve a fixed width of the horizontal center, we can also use absolute positioning with negative margin to achieve, the specific code is as follows:
Html Markup
Copy CodeThe code is as follows:
<div class= "Horizontal" >content</div>
CSS Code:
Copy CodeThe code is as follows:
. horizontal {
width:960px;
Position:absolute;
left:50%;
Margin-left: -480px;/* This value equals "-WIDTH/2" */
}
There are several points to note about this approach:one is to have a fixed width, the other is to be centered on the absolute positioning of the element, and "left:50%"; its three sets a negative "margin-left" to this element and the value equals half the width, and if the element is not relative to the browser, You also need to set a relative positioning "position:relative" on its parent element。
Method Three:
This method is mainly for single-line text center or the table format described above, the main use is Text-align:center let the element horizontal center
Copy CodeThe code is as follows:
. Testh{text-align:center;}
Face is mainly with you to explore and learn a variety of methods to achieve vertical center elements, we can make a change in these methods to achieve its horizontal center, so that the element horizontal vertical center effect. The implementation of a lot of ways, and they have different, can say they have each good, each has a bad, specifically how to make them more suitable for your practical application, you can carefully compare, I prefer method four, simple, compatibility strong, just need to add an additional label. Having said so much, I hope to help my friends in need. From:http://www.jb51.net/css/102744.html
CSS Production horizontal vertical center alignment a variety of ways are different
