Examples of horizontal vertical center alignment layout in css

Horizontally centered. If you know the width of the element, you can use

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

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

If the width of an unknown element is not an inline element, the following solutions are suitable for you.

It is difficult to use CSS to realize the vertical center effect of elements. Although there are many implementation methods, many methods may not work normally in some browsers. Next, let's take a look at the advantages and disadvantages of these different methods to achieve vertical center.

Method 1:
This method is quite simple to implement vertical center of a single row. You only need to ensure that the element content is a single row and its height is fixed, you only need to set "line-height" to the same value as "height. However, this method has too many limitations and is only applicable to elements of a single line of text. Therefore, this method cannot be used in multi-line elements.

Html Markup

The code is as follows:	Copy code
<Div class = "vertical"> content </div> CSS Code: . Vertical { Height: 100px; Line-height: 100px;/* value equal to the element height */     }

Advantages:

Suitable for all browsers, content will not be cut off when there is not enough space

Disadvantages:

This method is only applicable to text and images. When your text is not a single line, the effect is very poor, which may make you feel sick.

This method is very useful for small elements, such as making a button, image, or single line text field

First: relative positioning method

The principle is that the parent class floats at the same time to left: 50%, while the child class floats at the same time to 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>

Type 2: force 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: The block-level elements are changed to inline elements, so the height, width, margin-top, margin-bottom, padding-top, and padding-bottom cannot be used.

Third: use inline-block

If you have read the inline-block I wrote before to replace float, you may be aware of the benefits of this attribute.

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

 

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>

The disadvantage is that it is not compatible with ie6 and ie7.

We recommend that you use the inline-block horizontal center method, which retains the block-level element features and is perfectly compatible. That is, there are a lot of code. In addition, you can use tables to horizontally Center data.

After we have finished the horizontal center, we will talk about vertical center.

If the element is an inline element with only one row, we can use line-height to set the same size as its height to implement vertical center.

Vertical center of multi-line text

I. The size is not fixed. The vertical center of multiple lines of text

① Single line text
Many people may know how to center a single line of text vertically, that is, use line-height to set the line-height value to the same as the height value of the external label box. For example, the following css code: height: 3em; line-height: 3em ;......
The following figure shows the result:

Vertical center alignment of single-line text

② Multi-line text
How can I align the height of the parent container with the vertical center of one line, two or more lines of text?
The key to implementation is to process text as an image. Encapsulate all the text with a span label and set the display attribute (inline-block attribute) of the text and the image ), then, process the vertical center of the text by processing the vertical center of the image.
The core css code is as follows,
External div tag:

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

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

Lines of unfixed text vertical center alignment
There are several brief descriptions:
1. In this example, em is used as the unit. If you are not sure about the em unit, you can use px as the unit and change the value;
2. The external div cannot use floating;
3. The ratio of the external div height to the text size is 1.14;
4. vertical-align of the internal label: middle can be omitted, but the ratio of the external div height to the text size needs to be modified. I tried it myself and the height is about 1.5 higher than the font size;
5. For system reasons, I have not been able to test it in IE8.

You can click here for the final effect and JavaScript demonstration.

2. The size is not fixed, and the image is horizontally and vertically centered.

① Transparent GIF image + background positioning method
The background-position: center is used to center the image. This is a very practical and smart way, and it is good for maintaining and controlling costs. This method is used to sort images searched by Microsoft Bing.
The principle of the method is very simple. A transparent GIF image is used as a cover layer, and the height and width are stretched to the desired size. Then, a background-position: center attribute is given to the GIF image. However, it is recommended that background-image be written on the page, because in actual projects, this must be a dynamic URL address, and css files do not seem to support dynamic URLs. The following is a screenshot of the instance demo page.