Use CSS to achieve horizontal center, vertical center

Add a relative position to the parent element position: relative; Then add the CSS style to the child element

.center{ position: absolute; top:50%; left:50%; width:100%; transform:translate(-50%,-50%); text-align: center; } one drawback is that if you use positioning, if your head also uses positioning, then using this positioning. When you view content, it rolls to the top of the header. Display: flex; display: flex; display: flex; display: flex; display: flex; align-items: center; // justify-content: center; // Horizontal centerCopy the code