Horizontal vertical centering based on translate for scenes with a known width and a height that is not fixed

Horizontal vertical center of the project will encounter more, there are many solutions, today just learned to use translate to solve the horizontal vertical center of the scheme, said this scheme before I often solve the horizontal vertical center of a scheme

<style>. Box{position:fixed;top:50%;left:50%;width:100px;Height:100px; margin-left:-50px;margin-top:-50%;background:Red;}</style><Divclass= "box"></Div>

The above scheme must be in the case that the width and height are clear, can be horizontally vertically centered,

If you now only know the width, high is not fixed, need to be based on the content of the elements of the height of the changes in the case, and want to horizontal vertical center, then you can use translate to solve

<style>. Box{position:fixed;Top:50%; Left:50%;width:100px;Transform:Translate ( -50%,-50%);background:Green;}</style><Div>Translate</Div>

Translate moving elements can be summed up in three ways: horizontal movement, vertical movement up and down, diagonal movement

Move horizontally to the right to move translate (x,0); Move translate (-x,0) to the left

Move up and down move translate (0,-y); Move Down translate (0,y);

Move the translate (x, y) move diagonally to the upper-right corner of the translate (x,-y). Move translate (-x,y) to the top left corner move translate (-x,-y)

Horizontal vertical centering based on translate for scenes with a known width and a height that is not fixed