how to put element in center in html

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

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

1p {
2  text-align: center;
3}

1.element {
2  position: absoloute;
3  margin: auto;
4  left: 0;
5  right: 0;
6  top: 0;
7  bottom: 0;
8}

1/*ADD MARGIN auto to left and right*/
2.box1{
3    width:80%;
4    margin:0 auto;
5}