Questions about centering

Talk about the center on the gas, said the center can see work experience, I summed up a few, we can refer to the next 1, the center of the element within the line

This is not much to say, horizontal center with Text-align:center, vertical center with line-hight: high value

2. Center of block-level element with known wide height

<!        DOCTYPE html>{margin:0; padding:0;                } #one {width:400px;                height:400px;                border:1px solid red; position:relative;/*The parent box should be positioned relatively*/} #two {width:100px;                height:100px;                BORDER:1PX solid blue; Position:absolute;/*The sub-box must be absolutely positioned*/Left :50%; Top:50%; Margin-top: -50px;/*offset up to half of its height*/margin-left: -50px;/*half of its width to the left*/            }                        </style> 3. Table-cell of block-level elements with unknown width and height
<!         DOCTYPE html>{margin:0; padding:0;                } #one {width:400px;                height:400px;                border:1px solid red; Display:table-cell; Vertical-Align:middle; Text-Align:center;                } #two {width:100px;                height:100px;                BORDER:1PX solid blue; Display:inline-block;/*must be converted to inline elements*/            }                                </style> 4. Transform of block-level elements with unknown width and height
<! DOCTYPE html>{margin:0; padding:0;                } #one {width:400px;                height:400px;                border:1px solid red;                                        position:relative;                } #two {width:100px;                height:100px;                BORDER:1PX solid blue; Left:50%; Top:50%; -webkit-transform:translate (-50%,-50%);            Position:absolute; }                                </style> 5, unknown width of the block-level elements of the center of the Elastic box layout
<! DOCTYPE html>{margin:0; padding:0;                } #one {width:400px;                height:400px;                border:1px solid red;                Display:flex; Justify-content:center;/*Center Horizontally*/Align-items:center;/*Center Vertically*/} #two {width:100px;                height:100px;            BORDER:1PX solid blue; }                                </style> 

Questions about centering