如何使用HTML和CSS設置垂直居中顯示？

Vertical aligning in CSS is always a hot topic. There are many different ways to achieve it, and it can be frustrating when you think you’ve tried them all, and your design still isn't working. This article will go over a few of the most common and effective techniques.
1. Use Flexbox
The most effective method for vertical aligning is using the Flexbox layout. With Flexbox, centering elements horizontally and vertically is as easy as setting two properties:
.parent {
display: flex;
justify-content: center; /* Centers items horizontally */
align-items: center; /* Centers items vertically */
}
2. Use Absolute Positioning
Another popular method is to use absolute positioning on both the parent and the child elements.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3. Use the Table Cell Method
You can also use the table-cell method, which mimics the behavior of table cells. This is achieved by setting the display property to table-cell on the parent element, and then using the vertical-align property on the child element.
.parent {
display: table-cell;
vertical-align: middle;
}
4. Use Line-Height
You can also use line-height to center text within a container, but this method only works if the content is on one line.
.container {
height: 200px;
line-height: 200px;
text-align: center;
}
In conclusion, there are many different ways to achieve vertical alignment in CSS. Flexbox is the most effective method, but you can also use absolute positioning, the table-cell method, or line-height. The key is to experiment with different techniques until you find the one that works best for your design.