Horizontal Vertical center alignment layout in CSS some examples summary

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

The code is as follows	Copy Code
. cell{width:300px; margin:0 auto; text-align:center;}

If the inline element is centered, then the direct use of the Text-align:center line

If the unknown element is the width and is not an inline element, then here are a few scenarios for you.

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 that the element content is a single line, and its height is fixed, you just set its "line-height" as 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

The code is as follows	Copy Code
<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:

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

The first type: relative positioning method

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

The code is as follows

Copy Code

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

Second type: Mandatory inline

The code is as follows	Copy Code
<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. are not available.

The third type: using Inline-block

If you've seen the Inline-block I wrote before, replace float may be clear about the benefits of this property

The code is as follows	Copy Code
<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 type

The code is as follows	Copy Code
<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 to use Inline-block, a horizontally centered method that preserves block-level element characteristics and is perfectly compatible. is a bit more code. Alternatively, you can use a table to center horizontally.

Finish the horizontal center, below the vertical center.

If the element is an inline element, and there is only one row, we can set it to the same size as its height by line-height, and the vertical center is implemented.

horizontally Vertical center of multiline text

One, the size is not fixed, multi-line text vertical Center

① Single-line text
Maybe a lot of people know how to make one-line text vertical center display, that is, using Line-height, the Line-height value and the height of the external label box is set to the same value. For example, the following CSS code: HEIGHT:3EM; Line-height:3em; ......
The results are shown as follows:

Vertical Center alignment of single-line text

② Multi-line text
How to implement the parent container height fixation, the text may be one line, two rows or more rows of vertical center alignment.
The key to implementation is to treat the text as a picture. Wrap all the text with a span tag, set the Display property (Inline-block property) with the same text as the picture, and handle the vertical centering of the text with the vertical center of the processing picture.
The core CSS code is as follows,
External div Tags:

The code is as follows	Copy Code
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 Tags:

The code is as follows	Copy Code
Span{display:inline-block; font-size:0.1em; vertical-align:middle;}

line number not fixed vertical center alignment
A few brief notes:
1. This example with EM do units, if you do not understand the EM units, grasp not to, you can use PX to do units, value to change;
2. External Div cannot use float;
3. The external div height and the text size ratio 1.14 is advisable;
4. Internal label Vertical-align:middle can be omitted, but the external div height and text size ratio to modify, I tried it myself, height than the font 1.5 or so appearance;
5. System reasons, I was not able to test under IE8.

To achieve the ultimate effect and JavaScript demo, you can click here ⤴ to see.

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

① Transparent GIF picture + method of background positioning
This takes advantage of the background-position:center to achieve a picture center display. This is a very practical and very clever way, for the maintenance of control costs are very good. The image arrangement of Microsoft Bing Image Search is the method used.
The principle of the method is simple, use a transparent GIF image to do the overlay, aspect stretch to the desired size, and then give this GIF picture a Background-position:center center property. And the Background-image recommendation is written on the page, because in the actual project, this is definitely a dynamic URL address, CSS file does not seem to support dynamic URL address. Here is a screenshot of the effect of the example demo page