The CSS is vertically and horizontally centered

List two ways to write it:

1. The parent element dictates that the child element’s content is vertically centered

display: flex;
align-items: center;
justify-content: center;
Copy the code

2. The child elements themselves are vertically and horizontally centered

position:relative;
left: 50%;
top: 50%;
transform:translate(-50%, -50%);
Copy the code