Several methods that allow elements to be centered horizontally vertically

1. Negative margin method: This is a more commonly used method, in the knowledge of the width of the elements of the premise can be used

1 <div id= "a" ></div>2 3 #a{4 Height:300px;5 width:300px;6 position:Absolute;7 Top:50%;8  Left:50%;9 Margin-left:-150px;Ten Margin-top:-150px; One}

Note: Negative margin is a very interesting usage, and in-depth understanding will find him very useful in layout.
Advantages : Low code volume, good compatibility.
Cons: non-responsive methods, content may be outside the container.

2.transform Method:

 <div id= "a" ></div> #a  { width< /span>: 50% ; :  20% ;  background :  green ;  position :  absolute ; : 50% ;  left :  50% ;  Transform : translate ( -50%, -50%) ; -webkit-transform : translate ( -50%, -50%) ; -ms-transform : translate ( -50%, -50%) ;} 

Advantages : Low code volume, variable width and height, corresponding layout
cons : IE8 is not supported and may require a vendor prefix

3.Flexbox method

<div class= "Vertical-container" > <div class= "a" ></div></div>.vertical-container{Height:300px;width:300px;background:#ccc;Display:-webkit-flex;Display:Flex;-webkit-align-items:Center;Align-items:Center;-webkit-justify-content:Center;justify-content:Center;}. A{width:200px;Height:200px;background:Green;}

Note: The use of Flexbox is much more than that, and there are many interesting uses in the layout.

4. "Fully Horizontal vertical Center": Must set the height of the element, the picture itself has a height can not be set.

<div id= "a" ></div> #a {      width: 200px;     height: 200px;     background: Red;     margin:auto;     position: absolute;     top:0; Left:0; Right: 0; Bottom: 0;}

Advantages : Low code volume, good compatibility

The last method, I really do know, please forgive me really very dishes, please forgive me I really do not see, this is a few years ago by everyone with mushy method I actually now know, O (︶^︶) o!

Several methods that allow elements to be centered horizontally vertically