Horizontal Vertical Center Alignment Layout instance summary in CSS

Center horizontally, if you know the width of an element, you can use the

The code is as follows

. cell{width:300px margin:0 Auto; text-align:center;}

If the inline element is centered, use the text-align:center directly.

If the element width is unknown and is not inline, then several scenarios given below are also appropriate for you.

Using CSS to achieve the vertical center of the elements is a chore, although there are many ways to implement, but there are a number of methods in some browsers may not work properly. Let's take a look at the respective advantages and disadvantages of these different methods to achieve vertical centering.

Method One:
This method is used to achieve a single line vertical center is quite simple, you just make sure that the element content is a single row, and its height is fixed, you simply set its "line-height" and "height" as the value of the OK. However, this method is too restrictive to apply to elements of a single line of text, so this method cannot be used in multiple-line elements.

Html Markup

The code is as follows

<div class= "Vertical" >content</div>
CSS Code:

. 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:

Apply only to text and pictures, and this method, when your text is not a single line, the effect is very poor, poor to make you feel sick.

This approach is useful for using small elements, such as making a button, picture, or single-line text field

The first: Relative positioning method

The principle is that the parent class floats at the same time to the left left:50%, while the subclass is floating to the left while left:50%;

The code is as follows

<style type= "Text/css" >
. centerlist {Position:relative;left:50%;float:left}
. centerlist li {position:relative;right:50%; z-index:2;float:left}
</style>
<ul class= "Centerlist" >
<li><a href= "#" >lorem ipsum dolor.</a></li>
<li><a href= "#" >lorem ipsum dolor.</a></li>
<li><a href= "#" >lorem ipsum dolor.</a></li>
<li><a href= "#" >lorem ipsum dolor.</a></li>
<li><a href= "#" >lorem ipsum dolor.</a></li>
<li><a href= "#" >lorem ipsum dolor.</a></li>
<li><a href= "#" >lorem ipsum dolor.</a></li>
<li><a href= "#" >lorem ipsum dolor.</a></li>
<li><a href= "#" >lorem ipsum dolor.</a></li>
</ul>

The second type: Force inline

The code is as follows

<style type= "Text/css" >
. Centerlist_inline{text-align:center;}
. Centerlist_inline Li{display:inline;}
</style>
<ul class= "Centerlist_inline" >
<li><a href= "" >lorem1</a></li>
<li><a href= "" >lorem1</a></li>
<li><a href= "" >lorem1</a></li>
<li><a href= "" >lorem1</a></li>
</ul>

Limitations: Block-level elements are changed to inline elements, so height, width, margin-top,margin-bottom, padding-top,padding-bottom, etc. can not be used.

The third type: using Inline-block

If you've seen the Inline-block I wrote before, replace float, you'll probably know the benefits of this property.

The code is as follows

<style type= "Text/css" >
. centerlist_inline-block{text-align:center; font-size:0;-letter-spacing:-1px;}
. centerlist_inline-block Li{display:inline-block; *display:inline; *zoom:1; font-size:12px; letter-spacing:normal; Word-spacing:normal;}
</style>
<ul>
<li><a href= "" >lorem1</a></li>
<li><a href= "" >lorem1</a></li>
<li><a href= "" >lorem1</a></li>
<li><a href= "" >lorem1</a></li>
</ul>

Fourth Kind

The code is as follows

<style type= "Text/css" >
. centerlist_table-cell{display:table; margin:0 Auto;
. Centerlist_table-cell{display:table-cell;}
</style>
<ul class= "Centerlist_table-cell" >
<li><a href= "" >lorem1</a></li>
<li><a href= "" >lorem1</a></li>
<li><a href= "" >lorem1</a></li>
<li><a href= "" >lorem1</a></li>
</ul>

Disadvantage is incompatible ie6,ie7

It is recommended that you use Inline-block, a horizontally centered method, that preserves block-level element attributes and is perfectly compatible. Is that the code is a bit more. Alternatively, you can use the form to center horizontally.

I'm done. Horizontally centered, the following said vertically centered.

If the element is an inline element and there is only one row, then we can set the height of the same size by line-height, and then the vertical center is achieved.

Horizontally vertically centered on multiple lines of text

One, the size is not fixed, multiple lines of text vertically centered

① Single line of text
Maybe a lot of people know how to get a single line of text to be centered vertically, using line-height to set the Line-height value to match the height value of the external label box. For example, the following CSS code: HEIGHT:3EM; Line-height:3em; ......
The results show the following figure:

Single-line text centered vertically

② Multiple lines of text
How do you implement a parent container that is highly fixed, that the text may be one line, and that two or more rows are centered vertically?
The key to implementation is to treat the text as a picture. Encapsulate all the text with a span label, set the Display property (Inline-block property) of the text to the picture, and then handle the vertical center of the text with the handle of the picture vertically.
The core CSS code is as follows,
External div Tags:

The code is as follows

Div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; BORDER:4PX solid #beceeb; Color: #069; Font-size:10em; Vertical-align:middle;}

Internal span Label:

The code is as follows

Span{display:inline-block; font-size:0.1em; vertical-align:middle;}

Number of rows with no fixed text vertical center alignment
There are a few brief explanations:
1. This example uses EM to do units, if you do not understand the EM unit, grasp do not, you can use PX to do units, value to change;
2. External div can not use floating;
3. The outer div height and the text size proportion 1.14 is advisable;
4. The internal label of the Vertical-align:middle can be omitted, but the external div height and the size of the text to be modified, I tried it myself, height than the font about 1.5;
5. System reason, I did not be able to test under IE8.

Implementation of the final effect and JavaScript demo, you can ruthlessly click here ⤴ to see.

Two, the size is not fixed, the picture horizontal vertical Center

① Transparent GIF picture + background positioning method
This uses the Background-position:center to display the center of the picture. This is a very practical and smart way to maintain control costs are very good. This is the way that Microsoft Bing's image search is arranged. The
method is simple enough to use a transparent GIF image to make the overlay, width stretch to the desired size, and then give the GIF image a Background-position:center center attribute. The Background-image proposal is written on the page because it is definitely a dynamic URL address in the actual project, and the CSS file does not seem to support dynamic URL addresses.