CSS Vertical Centering

The first two days in the left-hand picture, the right word, the left word, encountered a vertical center problem. Just feel the vertical center is not as easy as imagined . let me explain the following:

Method One

You can set the parent display as a table (display:table;), and descendants can use the table properties (Vertical-align:middle;).

Pros: Content can dynamically change height, does not require CSS to define height, and when wrapper does not have enough height, content is not truncated.

Cons: IE is not compatible; nested multiple tags.

Method Two

Absolute Positioning is used when the content container has a fixed height (position:absolute;top:50%;margin-top: Height/2;)

Pros: Less apply tags, no compatibility issues.

Method Three

When the content container has a fixed height, use fixed positioning, (Position:fixed;top:0;margin:auto;), centered vertically relative to the browser.

Pros: Less apply tags, no compatibility issues.

Method Four

The relative parent box is absolutely positioned.

Method Five

Sets the Line-height=height, centering the single-line text vertically.

All of these methods require a fixed height, and the following methods do not require a fixed height

Method Six

Use CSS3 new attribute transform:translate ( -50%,-50%);

　　　　

　　　　

Method Seven

It is best to use the Flex box layout to set the vertical center.

　　　　

　　　　

CSS Vertical Centering