[Transfer] CSS div text is vertically centered --- Translated from: http://blog.163.com/zhaoyanping_1125/blog/static/20132915320120574238932/_html/css

[Transfer] CSS div text is vertically centered --- Translated from: http://blog.163.com/zhaoyanping_1125/blog/static/20132915320120574238932/_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:32:33

Original

1340 people have browsed it

Problem: vertical-align, setting the text to be vertically centered in a div, does not work. Then how to set the text of the div to be vertically centered!
There are many articles about "CSS text vertical centering" on the Internet. They mainly involve 3 methods:

1. Single-line text vertical centering:
Method: Change the height of the text paragraph (line- height) and the height of the area (height) can be set to be consistent.
Disadvantage: This method only works for single lines of text.

Code:

Website Development Log

2. Vertically center multi-line text:
Method: Do not set the area height (let the height adapt), and then use the same padding control at the top and bottom of the area, that is, use the padding attribute.
Disadvantage: Invalid for fixed-height intervals.

Code:

This blog is used to record every detail of website development . Includes website design, programming guides, resources and inspiration.
Most of the articles on this site are original or translated works.

3. Center the browser:

Method: Set the position attribute to absolute, and then leave half the height of the browser at the top Subtract half the height of the text area. For example, if the height of the text area is 20% of the browser height, then 50%-10%=40% should be left on the top. Similarly, half the width of the browser minus the text area should be left on the left. half the width.
Disadvantages: This method only makes the text fall in the center of the browser, not in the middle of a specific area.

Code:

This blog is used for Record every detail of website development. Includes website design, programming guides, resources and inspiration.
Most of the articles on this site are original or translated works. I have no objection to reprinting, because the Internet is designed to share resources.
But when you quote my article, please indicate the source. Thanks!

4. Since the above three methods all have shortcomings, they are often not the solutions you want. In practice, you may need to vertically center multiple lines of text within an area of a specific height. When none of the above three methods work, please try the final solution of CSS text centering introduced below! In fact, the final solution is not complicated. What is a bit troublesome is the browser compatibility issue. Therefore, we have to create 2 sets of CSS style schemes:

.outer {
display:table; width:578px; overflow:hidden;
background: #eee; height: 42px;
}
.middle {display:table-cell; vertical-align:middle; margin-left 10px;}
/*The following CSS is for IE7, IE6*/

Here we need to define three DIVs:
The outer layer (outer) can be defined as needed Height and width, but the display must be table.
The middle layer (middle) can have specific CSS styles, such as margin-left, but the display must be table-cell and vertical-align must be middle.
The inner layer is mainly used to deal with IE6 and IE7 (note: IE8 supports table-cell centering, so no hack is required).
With the above CSS, the HTML code can be written like this:

Put the text you want to center here
This is the second line
...