如何在引导程序中垂直对齐一个div？答案

【问题标题】：How to vertically align center a div in bootstrap?如何在引导程序中垂直对齐一个div？
【发布时间】：2019-08-21 18:40:24
【问题描述】：

如您所见，我的元素不是垂直居中对齐的。如何根据主 div 块中的最大元素垂直对齐一行中的所有元素？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div style="">
                <div class="col-md-6" style="padding-left: 0;">
                    <div class="form-group">
                        <label style="margin-right: 10px">Marital Status:</label>
                        <div class="radio-inline" style="padding-left: 0;">
                            <label class="radio-inline"><input type="radio" name="marital_status" value="Single">Single</label>
                        </div>
                        <div class="radio-inline">
                            <label class="radio-inline"><input type="radio" name="marital_status" value="Married">Married</label>
                        </div>
                    </div>
                </div>
                <div class="col-md-6" style="padding-right: 0;">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-group">
                                <label for="address_1">Hobby:</label>
                                <input type="text" class="form-control" name="hobbies[]">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <button type="button" class="btn btn-primary btn-block">+</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

Vertical Align Center in Bootstrap 4的可能重复

标签： html css twitter-bootstrap-3

【解决方案1】：

我只是在您的代码中添加了一些 CSS。试试这个我希望它会帮助你。谢谢

html, 
body {
  height: 100%;
}

.verticalAlignContainer {
  display: flex;
  align-items: center;
  height: 100%;
}

.verticalAlignContainer .row {
  width: 100%;
}

并将verticalAlignContainer 类与container 一起使用。

<div class="container verticalAlignContainer">

html, 
body {
  height: 100%;
}

.verticalAlignContainer {
  display: flex;
  align-items: center;
  height: 100%;
}

.verticalAlignContainer .row {
  width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container verticalAlignContainer">
    <div class="row">
        <div class="col-md-12">
            <div style="">
                <div class="col-md-6" style="padding-left: 0;">
                    <div class="form-group">
                        <label style="margin-right: 10px">Marital Status:</label>
                        <div class="radio-inline" style="padding-left: 0;">
                            <label class="radio-inline"><input type="radio" name="marital_status" value="Single">Single</label>
                        </div>
                        <div class="radio-inline">
                            <label class="radio-inline"><input type="radio" name="marital_status" value="Married">Married</label>
                        </div>
                    </div>
                </div>
                <div class="col-md-6" style="padding-right: 0;">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-group">
                                <label for="address_1">Hobby:</label>
                                <input type="text" class="form-control" name="hobbies[]">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <button type="button" class="btn btn-primary btn-block">+</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：