Indefinite wide box with vertical high horizontal centering

1、

.father {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width:500px;height: 500px;
}

.child {
    display: inline-block;
}

 

2、

.container {
  　　position: relative;
}
.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3, vh and vw are two more partial units, means "viewport height and width 1%", for example, is the current viewport 50vh (height of the window, a scroll bar contains experiment) 50% of the height. That vw will get almost 1% of window width.

.inner {
   position:fixed;
   top: 50vh;
   left: 50vw;
   transform: translate(-50%, -50%); 
}

　　derivative

　　

 .inner2 {
   position:fixed;
   top: 0;
   left: 0;
   margin: 50vh 0 0 50vw;
   transform: translate(-50%, -50%); 
}

4、

 .father {
        display: flex;
        justfy-content: center;
        align-items: center;
    }