css 两个div上下对齐

CSS 在页面布局中扮演着重要的角色，尤其是在实现两个 div 上下对齐时，CSS 显得尤为重要。以下是两个 div 上下对齐的 CSS 实现：

    .div-wrapper {
            position: relative;
            display: flex;
            align-items: center;
    }
    .div-1 {
            position: absolute;
            top: 0;
    }
    .div-2 {
            margin-left: auto;
            margin-right: auto;
    }
    

如上代码，其中我们首先在 div-wrapper 中使用了 display: flex 和 align-items: center 两个属性，让 div-wrapper 的子元素能够垂直对齐，即实现了两个 div 上下对齐的关键操作。

而在 div-1 中我们设置了 position: absolute 和 top: 0。这样我们便可以将 div-1 定位在 div-wrapper 的顶部，从而实现上下对齐的效果。

而 div-2 则使用 margin-left: auto 和 margin-right: auto 的方式，使其自动居中，达到更美观的效果。

总之，以上 CSS 属性的运用，可以在实现两个 div 上下对齐的同时，使页面更加美观整洁。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！