center on page css

1.centered {
2  position: fixed;
3  top: 50%;
4  left: 50%;
5  /* bring your own prefixes */
6  transform: translate(-50%, -50%);
7}

1.parent {
2  position: relative;
3}
4.child {
5  position: absolute;
6  top: 50%;
7  left: 50%;
8  transform: translate(-50%, -50%);
9}

1body {
2  display: grid;
3  place-items: center;
4  height: 100vh;
5  margin: 0;
6}

1#container
2{
3    width: 400px;
4    margin-left: auto;
5    margin-right: auto;
6}
7

1// example 1 
2div { display: grid; place-items: center; }
3
4// example 3
5div{ display:flex; align-items:center; }
6
7// example 3
8div { width: 100%; margin: 0 auto; }