/* the simple solution*/

table {

    text-align: center;

}

.parent {

  position: relative;

}

.child {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

// example 1 

div { display: grid; place-items: center; }

​

// example 3

div{ display:flex; align-items:center; }

​

// example 3

div { width: 100%; margin: 0 auto; }

.container {

  font-family: arial;

  font-size: 24px;

  margin: 25px;

  width: 350px;

  height: 200px;

  outline: dashed 1px black;

  /* Center child horizontally*/

  display: flex;

  justify-content: center;

}

​

.child {

  width: 50px;

  height: 50px;

  background-color: red;

}

.container {

  font-family: arial;

  font-size: 24px;

  margin: 25px;

  width: 350px;

  height: 200px;

  outline: dashed 1px black;

  /* Center child horizontally*/

  display: flex;

  justify-content: center;

}

​

.child {

  width: 50px;

  height: 50px;

  background-color: red;

}

element {

  position: absolute;

  left: 0;

  right: 0;

  margin: 0 auto;

}

.center {

  margin: auto;

  width: 50%;

  border: 3px solid green;

  padding: 10px;

}

div.container4 {

    height: 10em;

    position: relative }

div.container4 p {

    margin: 0;

    background: yellow;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-right: -50%;

    transform: translate(-50%, -50%) }

element {

  position: absolute;

  top: 0;

  bottom: 0;

  margin: auto 0;

}