Common Problems with HTML-CSS

Remember, working is king. We all have to be working. One can go a day without eating, but not a day without working. Jobs make us happy, holidays empty us. Get up, workman. Get up and work.

A common way to center div

Margin: 0 auto;

2. Absolute center: First add absolute position to div and set the top, bottom, left, and right margins to 0 or equal. Then use margin: Auto to automatically center div

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
Copy the code

3. Use Flex to center horizontally and vertically

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

4, positioning + deformation => center

Add position: relative to the parent element; Relative positioning.

Add position to its element: absolute; Absolute positioning.

top: 50%; The height that makes its element 50% above its parent.

left: 50%; The width that makes its element 50% the width of the parent element above it.

transform: translate(-50%,-50%); Move your element to the left and up by 50% of the width and height of your element.