center

box1-start class="box1" <class="content1"> box1-end 1.margin

    .box1 {
        width: 100%;
        height: 500px;
        border: solid 1px black;
    }

    .content1 {
        width: 200px;
        height: 100px;
        border: 1px solid red;
        margin-left: 50%;
        margin-top: 250px;
        transform: translate(-50%, -50%);
    }

2.position

.box1 { width: 100%; height: 500px; border: solid 1px black; }

    .content1 {
        width: 200px;
        height: 100px;
        border: 1px solid red;
        position: absolute;
        top: 250px;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
     3.table-cell
    .box1 {
        width: 800px;
        height: 500px;
        border: solid 1px black;
        display: table-cell;
        vertical-align: middle;
    }

    .content1 {
        width: 200px;
        height: 100px;
        border: 1px solid red;
        margin: auto;
    }
    
   4.flex
    .box1 {
        width: 100%;
        height: 500px;
        border: solid 1px black;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .content1 {
        width: 200px;
        height: 100px;
        border: 1px solid red;
    }
    
    
   
    
    5.grid
     .box1 {
        width: 100%;
        height: 500px;
        border: solid 1px black;
        display: grid;
        /* place-items: <align-items> <justify-items>; */
        /* place-items: center; */
        /* justify-items: center;
        align-items: center; */

        /* place-content: <align-content> <justify-content> */
        place-content: center;
    }

    .content1 {
        width: 200px;
        height: 100px;
        border: 1px solid red;

        /* justify-self: center;
            align-self: center; */
    }