Using CSS to achieve div horizontal vertical centering

Implementation of the center of the scheme there are many, here is the introduction of pure CSS using absolute with the margin scheme.

1. P Width and Height fixing

Width:400px;height:200px;position:absolute;top:50%;left:50%;margin-top: -100px;margin-left: -200px;

Margin-top is-(HEIGHT/2), Margin-left is-(WIDTH/2). Of course, you can also use no margin, that is, Top for calc (100%-height)/2,left for Calc (100%-width)/2, but it is recommended that you do not use Calc ().

2. P Wide Height not fixed

width:50%;height:50%;p Osition:absolute;top:0;right:0;bottom:0;left:0;margin:auto;

Note that this applies to situations where a wide height needs to be specified, such as using percentages or dynamically modifying with JS, otherwise it may be treated as 100%.

You can also use translate () without margin, as follows:

width:50%;height:50%;p Osition:absolute;top:50%;left:50%;transform:translatex ( -50%) Translatey (-50%);

3. CSS3 the vertical center of the indefinite wide level

Justify-content:center; /* Sub-element horizontally centered */align-items:center;     /* child element vertically centered */display:-webkit-flex;

Adding on a parent element enables child elements to be vertically centered horizontally.