如何垂直居中一行？ [复制]答案

【问题标题】：how to center a row vertically? [duplicate]如何垂直居中一行？ [复制]
【发布时间】：2019-03-09 23:23:28
【问题描述】：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-reboot.min.css">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-grid.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col col-lg-3"></div>
        <div class="col">
            <div class="row">
                <div class="left col-lg-5"></div>
                <div class="right col-lg-6">
                    <form>
                        <div class="form-group">
                            <label for="FIO">ФИО</label>
                            <input type="text" class="form-control" id="FIO">
                        </div>
                        <div class="form-group">
                            <label for="inputTelephone">Телефон</label>
                            <input type="text" class="form-control" id="inputTelephone">
                        </div>
                        <div class="form-group">
                            <label for="inputAddress">Адрес</label>
                            <input type="text" class="form-control" id="inputAddress">
                        </div>
                        <button type="submit" class="btn btn-secondary">Secondary</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col col-lg-3"></div>
    </div>
</div>

</body>
</html>

尝试了文档中列出的所有方法，甚至示例都不起作用。尝试了文档中列出的所有方法，甚至示例都不起作用。

【问题讨论】：

连例子都不行？ .. 检查库是否已加载。
你想在这里居中什么？
请说明你想达到什么目标，我们很难知道你想以什么为中心。尝试提供一个 Plunker 来重现您的问题。
这里还有一些例子stackoverflow.com/questions/44389464/…
你能发送一张图片或一个网站来展示你想要的样子吗？

标签： css bootstrap-4

【解决方案1】：

如果我理解正确：

.my-auto{
  margin-top: auto;
  margin-bottom: auto;
}
html, body {
    height: 100%;
}
.container {
    height: 100%;
}
.h-100 {
    border: 1px dotted #cc2222;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <h5 class="text-muted">Vertical &amp; horizontal center using auto-margins..</h5>
    <!--vertical align on parent using my-auto, horizontal align on self mx-auto-->
    <div class="row h-100">
      <div class="col-sm-12 my-auto">
        <div class="row">
        <div class="col col-lg-3"></div>
        <div class="col">
            <div class="row">
                <div class="left col-lg-5"></div>
                <div class="right col-lg-6">
                    <form>
                        <div class="form-group">
                            <label for="FIO">ФИО</label>
                            <input type="text" class="form-control" id="FIO">
                        </div>
                        <div class="form-group">
                            <label for="inputTelephone">Телефон</label>
                            <input type="text" class="form-control" id="inputTelephone">
                        </div>
                        <div class="form-group">
                            <label for="inputAddress">Адрес</label>
                            <input type="text" class="form-control" id="inputAddress">
                        </div>
                        <button type="submit" class="btn btn-secondary">Secondary</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col col-lg-3"></div>
    </div>
</div>
      </div>
     </div>
       
</div>

希望对您有所帮助。

【讨论】：