Web page Production Tips Summary: CSS Center Encyclopedia Code

Article Introduction: CSS Center Encyclopedia

I see the recent micro-blog Popular CSS Center technology, foreigners code to write related articles, a race a long ah, I summed up a few summed up, is a note.
Once said: "Anise beans back to the word has four kinds of writing", if one day there is an interviewer asked you: "Center a total of several ways to" it, haha, first prepared it ~ ~
Each method has its own pros and cons, you weigh it yourself, at least when you need to be centered on multiple ideas.

It's not recommended.

Text-align:center

Center inline text horizontally in the parent container, or inline elements

Vertical-align:middle

Vertically centered inline text, inline elements, cooperate display:table , display:table-cell and have miraculous.

Line-height

With height, vertically centered text

Margin:auto

Example:

hello world

This technique is quite arrogant, and applies to content that is not fixed-size, min-width , Max-height , overflow:scroll , and so on.

Absolute Positioning Center

Parent container element:position: relative

.Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute;

Note: Height must be defined, recommended plus overflow: auto , to prevent content overflow.

Center of Viewport

Content element: position: fixed , z-index: 999 , remembering the parent container elementposition: relative

.Absolute-Center.is-Fixed { width: 50%; height: 50%; overflow: auto; margin: auto; position: fixed; top: 0; left: 0; bottom: 0; right: 0;

Modal window instance

Response type

The percentage is wide, the maximum and the minimum width can be, plus padding can also

.Absolute-Center.is-Responsive { width: 60%; height: 60%; min-width: 400px; max-width: 500px; padding: 40px; overflow: auto; margin: auto; position: absolute;

Offset

As long as margin: auto; in, the content block will be centered vertically, top, left, bottom, and right can set the offset.

.Absolute-Center.is-Right { width: 50%; height: 50%; margin: auto; overflow: auto; position: absolute; top: 0; left: auto; bottom: 0; right: 20px;

Overflow

When centered content is higher than the parent container, prevent overflow, plus overflow: auto (can be added when there is no padding max-height: 100%; ).

.Absolute-Center.is-Overflow { width: 50%; height: 300px; max-height: 100%; margin: auto; overflow: auto; position: absolute;

Adjust size

The Resize property lets you adjust the dimensions. Set min-/max- limit size, OK plus overflow: auto .

.Absolute-Center.is-Resizable { min-width: 20%; max-width: 80%; min-height: 20%; max-height: 80%; resize: both; overflow: auto; margin: auto; position: absolute;

Image

Images also apply, settingheight: auto;

.Absolute-Center.is-Image { width: 50%; height: auto; margin: auto; position: absolute;

Variable height

Height must be defined, but can be a percentage or max-height. If you do not want to define heights, use display: table (consider Table-cell compatibility).

1 2 3 4 5 6 7 8

Negative margin

Know exactly the width and height, and the negative margin is half the width and the high.

.is-Negative { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width + padding)/2 */

Table-cell

Reference article: Flexible height vertical centering with CSS, beyond IE7

Structure:

Style:

.Pos-Container.is-Table { display: table; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; } .is-Table .Center-Block { width: 50%;

FlexBox

Reference article: Designing CSS Layouts with Flexbox are as easy as Pie

1 2 3 4 5 6 7 8 9 A

Resources:
* Absolute Horizontal and Vertical centering in CSS
* Absolute centering in CSS
* Centering all the directions
* Seven Ways of centering with CSS
* How to Center anything with CSS
* Vertical centering with CSS