How to use CSS to center a container horizontally vertically

directly on the code:

<! DOCTYPE html>
Question: How do I get the inner container of class Div2 to center up or down?
Interview friends Most of the answers are not so correct, the author here to give you a detailed introduction
1. We can use margin to achieve this effect
?
 
 
 
  
  
 
   
 
    
1 
 
    
.div  2  { width  :  40px  ;  height  :  40px   background-color  :  green   margin-top  :  30px   margin-left  :  30px  ;}  
 
   
 
  
 
 
 
--------we need to set Div2 's Margin-left, margin-top value to One-second of the parent container's width minus one-second of its own width. The parent container here is Div1
its width is 100px; the width of the div2 is 40px from which the margin-top:30px is obtained; margin-left:30px; The div2 is centered;
2. Using the absolute positioning Position:absolute with the Auto property of margin to achieve the center effect we can change the CSS to
. div1{  width:100px; height:100px; border:1px solid #000000; position:relative;} div2{width:40px; height:40px; Background-color:green; Position:absolute; Margin:auto; left:0; top:0; right:0; bottom:0;}
--------set the div2 to the absolute positioning of the relative div1, margin set to four-sided auto left, top, bottom, and right to 0 the browser will automatically identify the absolutely positioned container margin:auto,
Finally get the effect similar to margin:0 auto;
We can also set left, top, bottom, and right to the value you want so that DIV2 can be anywhere in Div1, but the origin of the location is Margin:auto moved in the upper-right corner of the div2, for example:
div2{width:40px; height:40px; background-color:green; position:absolute; margin:auto; left:0; top: -30px; right:0 ; bottom:0;}
At this point the position of the div2 in the vertical center of the -30px Place;
Summary: In our web page, often encounter such demand pop-up window center, the center of the picture, many children's shoes using JS algorithm dynamic set left, top, and this step is not necessary;
No absolute positioning can also be written like this:
<style type= "Text/css" >
. div1{width:100px; height:100px; border:1px solid #000000; Vertical-align:middle;display:table-cell;}
. div2{width:40px; margin:0 Auto;}
</style>

<div id= "Div1" class= "Div1" >
<div id= "Div2" class= "Div2" >
This is a piece of text
</div>
</div>
Description
After studying the specifications and documentation, I summed up how "full centering" works:

 
 

  
  
 
   
In the normal document flow, Margin:auto; It means that the margin-top and margin-bottom of the set element are 0.
 
  
 
 
W3.org:?if ' margin-top ', or ' margin-bottom ' was ' auto ', their used value is 0.
2. Set the Position:absolute; Element becomes a block element and is detached from the normal document flow. The rest of the document is rendered as usual, and the elements do not appear to be in the same position. Developer.mozilla.org:?... an element which is positioned absolutely is taken out of the flow and thus takes up no space
3. Set the top:0; left:0; bottom:0; right:0; The block element of a style allows the browser to wrap a new box around it, so that the element fills its inner space relative to the parent element, which can be either a body tag or a set of position:relative; The container for the style. Developer.mozilla.org:? For absolutely positioned elements, "top", "right", "bottom" and "left" properties specify offsets from the edge of the Eleme NT ' s containing block (what's the element is positioned relative to).
4. When the element is set to a wide height, the browser blocks the element from filling up all the space, according to Margin:auto; requirements, recalculate, and wrap a new box. Developer.mozilla.org:?the margin of the [absolutely positioned] element is then positioned inside these offsets.
5. Since the block element is absolutely positioned and is out of normal document flow, the browser sets an equal value for Margin-top and margin-bottom before wrapping the box. W3.org:? If none of the three [top, bottom, height] is ' auto ': If both ' margin-top ' and ' margin-bottom ' is ' auto ', solve the Equa tion under the extra constraint that the both margins get equal values.? Aka:center The block vertically
Use "Full Center", intentionally follow the standard margin:auto; Style rendering, so it should work in a variety of browsers that are compatible with the standard.
How to use CSS to center a container horizontally vertically