About vertical center

Every time a project is vertically centered, it takes half a day. Here, let's sort out some of my understanding about vertical center.

1. Line Element

For example, use vertical-align: middle to directly use line elements, such as IMG and span.

2. Block Elements

Vertical center, the simplest way is height: 20px; line-Height: 20px; so that they are equal, the block elements can achieve the center effect without damaging the surrounding layout.

You can also use absolute positioning for layout, such as height: 100px; position: absolute; top: 50%; margin-top:-50px; to center the layout, however, it can be used only when the height is determined.

Similarly, you can use the same method to achieve horizontal center.

Advantages: Applicable to All Browsers without nested tags

Disadvantages:
When there is not enough space, the content will disappear (similar to the case where the DIV is in the body, when the user narrowing down the browser window, the scroll bar will not appear)

3. A <div> contains an IMG, and how to center a span?

Today, I saw my blog and explained vertica-align attributes in depth.

Http://www.html-js.com/article/Some-understanding-of-the-CSS-study-on-the-vertical-alignment-for-verticalalign

Are all row elements aligned with baselines? In principle, both common row elements and replacement elements align with the baseline of the parent element, however, their own height and height affect their layout. Used for formatted inline Elementsdisplay:inline-bolckThis makes an inline element behave like a block-level element and has an attribute of an element in the row (without line breaks, the tag end does not contain a br line break ), therefore, the text of the block-level element in the line is still written in sequence from the upper left corner to the lower right corner of the common Div label. The height of the added content is also top-down:

Therefore, if we increase the height of an element, we can see that the outer boundary of the content area increases progressively. So it is not surprising that when an image is inserted in an element, changing the element in the row to a block-level element in the row and assigning it the same height as the parent box, it will become non-aligned. In fact, they are the correct display effect, not because the display changes the vertical alignment baseline. However, we can usevertical-alginChange the vertical positions of the two parent boxes.

　　

. Content span {display: inline-block; Height: 80px; line-Height: 80px; Vertical-align: Top; Background: # 78c0fa; color: # FFF ;}

You can set span to diplay: inline-block, line-Height: 80px, and the position displayed on the baseline is 80 PX. The entire div is supported when the height is displayed down.
By setting vertical: align, the vertical center is achieved ~~~
4. This method sets some Div display methods as tables, so we can use the vertical-align property attribute of the table.

<div id="wrapper"><div id="cell"><div class="content">Content goes here</div></div></div>

#wrapper {display:table;}#cell {display:table-cell; vertical-align:middle;}

Advantages:
Content can dynamically change the height (not defined in CSS ). Content is not truncated when wrapper does not have enough space

Disadvantages:
Internet Explorer (or even IE8 beta) is invalid, and many nested labels (not so bad, another topic)

5. This method inserts a div outside the content element. Set the DIV Height: 50%; margin-bottom:-contentheight ;.

Content is cleared and displayed in the middle.

<div id="floater"></div><div id="content">Content here</div>

#floater{float:left; height:50%; margin-bottom:-120px;}#content{clear:both; height:240px; position:relative;}

Advantages:
Applicable to all browsers
Content is not truncated when there is not enough space (for example, window narrowing), and the scroll bar appears

Disadvantages:
The only thing I can think of is the need for additional null elements (not that bad, but another topic)

6. This method uses a position: absolute, div with fixed width and height. This div is set to top: 0; bottom: 0 ;. However, because it has a fixed height, it cannot be separated from the upper and lower distances to 0, so margin: auto; will center it. It is easy to use margin: auto; to vertically center block-level elements.

<div id="content">Content here</div>

#content {position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;height:240px;width:70%;}

Advantages:Simple
Disadvantages:IE (IE8 beta)The content is truncated, but no scroll bar appears.

From: http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html

About vertical center