如何用CSS实现页面中两个Div的等高对齐与垂直居中

问题描述 #

我在页面中设置了两个Div模块，分别为个人资料栏（profile section）与个人图片展示区，目前二者存在高度未对齐、未处于页面垂直居中位置的问题。请问如何实现它们在页面垂直居中且高度对齐的效果？

当前HTML代码：

<div class="container">

<div class="row  ">

    <!-- Mom Profile -->


    <div class="   col-md-3 col-sm-12 py-6  ">
        <div class="card card-profile card-secondary">
            <div class="card-header" style="background-image: url(assets/img/blogpost.jpg)">

                <div class="profile-picture center-align">
                    <div class="avatar avatar-xl">
                        <img src="assets/img/profile.jpg" alt="..." class="avatar-img rounded-circle">
                    </div>
                </div>
            </div>
            <div class="card-body  ">
                <div class="user-profile text-center">

                    <div class="desc">Ege</div>

                </div>
            </div>
            <div class="card-footer">
                <div class="row user-stats text-center">
                    <div class="col">
                        <div class=" ">125</div>
                        <div class=" ">Score</div>
                    </div>
                    <div class="col">
                        <div class=" ">25</div>
                        <div class=" accordion-danger">Sell</div>
                    </div>
                    <div class="col">

                        <div class=" ">134</div>
                        <div class="">Meal</div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Image Gallery -->
     

        <div   class="py-6 mt-5 col-md-9 col-sm-12">

            <div class="card">

                <div class="body">
                    <div id="aniimated-thumbnials" class="list-unstyled row clearfix">
                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                            <a href="img/1.jpg" data-sub-html="Demo Description">
                                <img class="img-responsive thumbnail" src="img/thumb/thumb-1.jpg">
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                            <a href="img/2.jpg" data-sub-html="Demo Description">
                                <img class="img-responsive thumbnail" src="img/thumb/thumb-2.jpg">
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                            <a href="img/3.jpg" data-sub-html="Demo Description">
                                <img class="img-responsive thumbnail" src="img/thumb/thumb-3.jpg">
                            </a>
                        </div>



                    </div>
                </div>
            </div>
        </div>
   
    </div>

</div>

当前布局效果：

解决方案 #

一、修复高度对齐问题 #

1. 移除错位margin：图片展示区的mt-5类是导致两栏垂直错位的直接原因，删除该类：

   <div class="py-6 col-md-9 col-sm-12">
   

2. 强制两栏等高：给父级row添加Bootstrap的align-items-stretch类，确保左右两列高度完全一致；同时给两个卡片添加h-100类，让卡片占满所在列的高度：

   <div class="row align-items-stretch">
   <!-- 个人资料栏卡片 -->
   <div class="card card-profile card-secondary h-100">
   <!-- 图片展示区卡片 -->
   <div class="card h-100">
   

二、实现页面垂直居中 #

通过Flex布局让整个内容容器在页面垂直居中，有两种方式可选：

方式1：全局样式控制

给html和body设置高度，再让container使用Flex布局：

html, body {
    height: 100%;
    margin: 0;
}
.container {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

方式2：独立wrapper控制（推荐，不影响全局）

给container外层添加一个专用的wrapper，通过它控制垂直居中：

<div class="page-wrapper">
    <div class="container">
        <!-- 原有row内容 -->
    </div>
</div>

对应的CSS：

.page-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem; /* 避免内容贴边 */
}

最终完整代码示例 #

HTML部分 #

<div class="page-wrapper">
    <div class="container">
        <div class="row align-items-stretch">
            <!-- Mom Profile -->
            <div class="col-md-3 col-sm-12 py-6">
                <div class="card card-profile card-secondary h-100">
                    <div class="card-header" style="background-image: url(assets/img/blogpost.jpg)">
                        <div class="profile-picture center-align">
                            <div class="avatar avatar-xl">
                                <img src="assets/img/profile.jpg" alt="..." class="avatar-img rounded-circle">
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="user-profile text-center">
                            <div class="desc">Ege</div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="row user-stats text-center">
                            <div class="col">
                                <div>125</div>
                                <div>Score</div>
                            </div>
                            <div class="col">
                                <div>25</div>
                                <div class="accordion-danger">Sell</div>
                            </div>
                            <div class="col">
                                <div>134</div>
                                <div>Meal</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Image Gallery -->
            <div class="py-6 col-md-9 col-sm-12">
                <div class="card h-100">
                    <div class="body">
                        <div id="aniimated-thumbnials" class="list-unstyled row clearfix">
                            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                <a href="img/1.jpg" data-sub-html="Demo Description">
                                    <img class="img-responsive thumbnail" src="img/thumb/thumb-1.jpg">
                                </a>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                <a href="img/2.jpg" data-sub-html="Demo Description">
                                    <img class="img-responsive thumbnail" src="img/thumb/thumb-2.jpg">
                                </a>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                                <a href="img/3.jpg" data-sub-html="Demo Description">
                                    <img class="img-responsive thumbnail" src="img/thumb/thumb-3.jpg">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS部分 #

html, body {
    margin: 0;
}
.page-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

内容的提问来源于stack exchange，提问作者masoud mazloum