CSS top and bottom center left and right center

one,

1. The inner elements of the container are centered up, down, left, and right.
2. The height of each line of the inner elements is subject to the highest

<div style="margin-top: 10px;
        border: 1px solid #c5c5c5;
        display:flex; 
        flex-wrap: wrap;
        justify-content: center;
        align-content:center;
        height: 100px;
    ">
    <div class="item" style="align-items: center;">
        111<br/>111
    </div>
    <div class="item" >
        2
    </div>
    <div class="item" >
        3
    </div>
    <div class="item" >
        4
    </div>
</div>

2. Single-line text setting is centered up and down

Set the line height of the text to achieve centering up and down.
Only single-line text is applicable

 <div style="background-color:red;height:100px;line-height:100px;" >
     hello word!
 </div>

other styles

1. Background gradient style

<div style="background-image:linear-gradient(to top,#96e15d 0%,#00e3ae 100%);
				width:100px;
				height:100px;" >
</div>