如何在引导列中居中 div？ [复制]答案

【问题标题】：How to centre a div within a bootstrap column? [duplicate]如何在引导列中居中 div？ [复制]
【发布时间】：2020-11-19 01:57:40
【问题描述】：

我有一个列，在该列内，一组 4 个标题包含在一个 div 中。我希望这个 div 居中，但是只能得到它，所以文本的开头位于中点 - 我想减去这个 div 宽度的一半，同时保持所有标题从同一个地方开始：

<header>
    <div>
        <div class="row justify-content-center">
            <div class="col-md-5">
                <div  style="margin-left: 50%;">
                    <h3>> 1</h3>                
                    <h3>> 2</h3>
                    <h3>> 3</h3>
                    <h3>> 4</h3>                
                    <h3>> 5</h3>
                    <h3>> 6</h3>
                </div>
            </div>
        </div>
    </div> 
</header>

行本身和列在页面中居中（水平对齐） - 但我希望该列的内容居中。

【问题讨论】：

请标记您的 Bootstrap 版本。
<div class="mx-auto" > 应该足够用 bs4 或做 <div class="col-md-5 d-flex flex-column align-center"> <hx>1</hx>...</div>
你想让 div 水平和垂直对齐吗？
水平对齐
@G-Cyrillus 不幸的是，这些建议都不起作用。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

这是一个可能的例子......

/* show me horizontal center */
body {background:linear-gradient(to left, pink 50%, hotpink 50%)}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-5 d-flex ">
                <div  class="mx-auto">
                    <h3>> 1</h3>                
                    <h3>> 2</h3>
                    <h3>> 3</h3>
                    <h3>> 4</h3>                
                    <h3>> 5</h3>
                    <h3>> 6</h3>
                </div>
            </div>
        </div>
    </div> 
</header>

【讨论】：