[分享]css两元素 垂直对其

在Web设计中，CSS是非常常用的技术之一。垂直对齐是CSS中的一个重要的概念，当我们需要两个元素垂直对齐时，我们可以使用CSS来实现。在实现垂直对齐时，一般会使用“display: tablecel...

在Web设计中，CSS是非常常用的技术之一。垂直对齐是CSS中的一个重要的概念，当我们需要两个元素垂直对齐时，我们可以使用CSS来实现。

在实现垂直对齐时，一般会使用“display: table-cell”属性来实现，因为这个属性可以将元素表现为表格单元格，并且可以进行垂直对齐。

#container {
    display: table;
}
#box1, #box2 {
    display: table-cell;
    vertical-align: middle;
} 

上面的代码中，我们需要将两个元素放置在一个容器中，这个容器需要设置为“display: table”。然后我们需要将两个元素设置为表格单元格元素，同时再加上“vertical-align: middle”属性来实现垂直居中对齐的效果。

当然，我们也可以使用“flexbox”来实现垂直对齐。在“flexbox”中，只需要使用“align-items: center”属性即可实现垂直对齐。

#container {
    display: flex;
    align-items: center;
} 

上面的代码中，我们只需要将容器设置为“display: flex”，再加上“align-items: center”属性就可以实现垂直居中对齐的效果。

总之，无论是使用“table-cell”还是“flexbox”，都可以实现垂直对齐的效果。我们可以根据实际需求来选择合适的方法。