The method of vertical centering of fixed width high div and non-fixed width high div in CSS

Fixed high-width div vertically centered

For example, the fixed high-width is very simple, the wording is as follows:

1 Position:absolute; 2 left:50%; 3 top:50%; 4 width:200px; 5 height:100px; 6 margin-left:-100px; 7 margin-top:-50px;

How to vertically center a high-width div without fixing it

Method one (this div element should be Inline-block):

Using a "ghost" pseudo-element (invisible pseudo-element) and Inline-block/vertical-align can be settled in, very ingenious. But this method requires that the element to be centered is inline-block, not a truly generic scheme.

The HTML is as follows:

<div class= "block" style= "height:300px;" >    <div class= "centered" >        

The CSS is as follows:

/*This parent can is any width and height*/. Block{text-align:Center;}/*the ghost, nudged to maintain perfect centering*/. Block:before{content:"';Display:Inline-block;Height:100%;vertical-align:Middle;Margin-right:-0.25em;/*Adjusts for spacing*/}/*the element to be centered, can also is of any width and height*/. Centered{Display:Inline-block;vertical-align:Middle;width:50%;}

The results are as follows:

Method Two

method is to use the CSS3 of the writing, want to be compatible with IE8 or suggest using the above Method!

The method is almost the same as our fixed height, but without margin we use translate ()

The code is as follows:

{  position: fixed;   top: 50%;   Left: 50%;   background-color: #000;   width:50%;   height: 50%; -webkit-transform: TranslateX ( -50%) Translatey ( -50%);} </style>

My CSS above is only for the WebKit kernel browser, the other kernel browser is written as follows:

-webkit-transform:translatex ( -50%) Translatey ( -50%);-moz-transform:translatex ( -50%) Translatey (-50%);- Ms-transform:translatex ( -50%) Translatey ( -50%), Transform:translatex ( -50%) Translatey (-50%);

Some styles of pop-up layers can also be centered with this method

Position:fixed;top:50%;left:50%;width:50%;max-width:630px;min-width:320px;height:auto;z-index:2000;visibility: hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;- Webkit-transform:translatex ( -50%) Translatey ( -50%);-moz-transform:translatex ( -50%) Translatey (-50%);- Ms-transform:translatex ( -50%) Translatey ( -50%), Transform:translatex ( -50%) Translatey (-50%);

CSS3 variable width High level vertical Center

As long as three words can realize the indefinite wide high level vertical center.

justify-content:center;//child elements are centered horizontally align-items:center;//the child elements are vertically centered display:-webkit-flex;

Adding the above 3 sentences to the parent element allows the child element to be horizontally vertically centered.

Use Margin:auto for vertical centering

The value of margin is set to auto, allowing us to allocate the remaining space! We know that block-level elements are set to margin:0 auto, and can be centered around the display! Is there any way to set the margin to Margin:auto after the top or bottom of the center? The center of the upper and lower left and right, you can achieve our vertical center!

The answer is yes, as long as we have enough space up and down, we can let the margin of auto to allocate up and down space.

We can make use of the way of positioning, let margin up and down all have enough space! Then you can use the Margin:auto to achieve vertical centering!

Implement HTML as follows: (Make a simple vertical bullet box)

<div class= "Father" >    <div class= "Son" ></div></div>

CSS code as follows, very simple, compatibility is fine, support ie8+

. Father{position:fixed;
width:100%;
Height:100%;
top:0;
Left:0;
Background-color:Rgba (0,0,0,.7);}. Son{position:Absolute;
Top:0;
 Left:0;
Bottom:0;
 Right:0;
width:50%;
Height:50%;
margin:Auto;
Background-color:Red;}

This allows for vertical centering.

The method of vertical centering of fixed width high div and non-fixed width high div in CSS