如何使包含h1、p、table的Div内容居中？

我一直尝试让包含<h1>、<p>和<table>标签的div内容居中，但因为表格的存在，第二个div的内容始终无法居中，多次尝试都没效果，求解决方案！

问题示例：（原图片链接已移除）

现有代码： #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container-fluid" style="background-color: rgba(0, 0, 0, 0.8); color: white;">
    
    <div class="row">
      <div class="col-md-12" style="padding-left:0; padding-right:0;">
        <img src="images/Charlie-Co.-Barbershop-West-Chester-3.png" class="img" width="100">
        <a
          href="https://booksy.com/en-ie/3715_charlies-barbers-lucan_barbers_52867_ireland"
          class="carousel-caption">Book now!</a>
      </div>
    </div>

    <div class="row">
        <div
          class="col-md-9 border-right border-bottom border-dark"
          style="padding-left: 0; padding-right: 0;" id="OpenTime">
            <div class="row">
                <div class="col-md-6">
                    <h1 style="font-family: Playfair Display;">Test Barbershop</h1>
                    <p style="font-family: Quicksand;text-align: justify;">
                        <br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non ultricies velit, eget suscipit velit. Nam laoreet magna ornare ex ornare ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vel tincidunt velit. Nam sed est metus. Maecenas commodo dolor non lorem semper malesuada. Aliquam tempor blandit sapien in sodales. Integer eu metus efficitur ligula mattis pretium. Donec finibus mi non sodales condimentum. Donec elementum nunc quis mauris pulvinar porta. Sed sed est eget justo vestibulum malesuada vitae at nulla. Suspendisse quis efficitur lorem. Phasellus non ornare ante. Mauris ullamcorper, ligula in malesuada malesuada, purus nibh pretium dui, ac eleifend purus mauris vel nisi. Sed lacinia hendrerit magna at pharetra. Suspendisse quis varius diam, et ultricies dui. In scelerisque felis ac sapien bibendum, eget iaculis nisl egestas. Proin tempor et magna eu molestie. Praesent consequat lorem ut accumsan vehicula. Nunc luctus turpis non sollicitudin fermentum. Fusce nec viverra ex, sit amet tristique turpis.ù
                    </p>
                </div>
                <div class="col-md-6" id="OpenTime">
                    <h1 style="font-family: Playfair Display;">Opening hours</h1>
                    <p style="font-family: Quicksand;">
                      <br>
                      Hours could change depending on Holidays & Bank Holidays
                    </p>
                    <table>
                        <tr class="monday fvl-d">
                            <td><span>Monday</span></td>
                            <td>9:30 - 18:30</td>
                        </tr>
                        <tr class="tuesday fvl-d">
                            <td><span>Tuesday</span></td>
                            <td>9:30 - 18:30</td>
                        </tr>
                        <tr class="wednesday fvl-d">
                            <td><span>Wednesday</span></td>
                            <td>9:30 - 18:30</td>
                        </tr>
                        <tr class="thursday fvl-d">
                            <td><span>Thursday</span></td>
                            <td>9:30 - 19:00</td>
                        </tr>
                        <tr class="friday fvl-d">
                            <td><span>Friday</span></td>
                            <td>9:30 - 19:00</td>
                        </tr>
                        <tr class="saturday fvl-d">
                            <td><span>Saturday</span></td>
                            <td>9:00 - 18:00</td>
                        </tr>
                        <tr class="sunday fvl-d">
                            <td><span>Sunday</span></td>
                            <td>11:00 - 15:30</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

解决方案： #

问题核心是表格默认作为块级元素不会自动居中，加上当前Bootstrap列未设置内容居中规则，可通过以下几种方式解决：

方法1：利用Bootstrap内置类

给包含表格的col-md-6添加text-center类，同时给表格添加mx-auto类（Bootstrap水平居中工具类）：

<div class="col-md-6 text-center" id="OpenTime">
    <h1 style="font-family: Playfair Display;">Opening hours</h1>
    <p style="font-family: Quicksand;">
      <br>
      Hours could change depending on Holidays & Bank Holidays
    </p>
    <table class="mx-auto">
        <!-- 表格内容保持不变 -->
    </table>
</div>

• text-center让列内的行内/inline-block元素居中，mx-auto让表格这个块级元素水平居中（需保证表格宽度不是100%）。

方法2：自定义Flex布局样式

给目标div添加Flex布局样式，实现容器内所有内容整体居中：

<div class="col-md-6" id="OpenTime" style="display: flex; flex-direction: column; align-items: center;">
    <!-- 内容保持不变 -->
    <table>
        <!-- 表格内容保持不变 -->
    </table>
</div>

这种方式适合需要让div内所有元素（标题、段落、表格）都居中的场景。

方法3：直接给表格设置居中

单独给表格添加外边距样式，实现块级元素基础居中：

<table style="margin-left: auto; margin-right: auto;">
    <!-- 表格内容保持不变 -->
</table>

此方法仅针对表格生效，不影响div内其他元素的对齐方式。

内容的提问来源于stack exchange，提问作者Gary Philpott