center css

1.container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}

1/* this will center all children within the parent element. */
2.parent {
3  display: flex;
4  justify-content: center; /* horizontal */
5  align-items: center; /* vertical */
6}

1.center {
2  display: block;
3  margin-left: auto;
4  margin-right: auto;
5}

1.parent {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}

1    position: absolute;
2    top: 50%;
3    left: 50%;
4    transform: translate(-50%, -50%);

1div.container4 {
2    height: 10em;
3    position: relative }
4div.container4 p {
5    margin: 0;
6    background: yellow;
7    position: absolute;
8    top: 50%;
9    left: 50%;
10    margin-right: -50%;
11    transform: translate(-50%, -50%) }