Bootstrap 4的居中按钮[重复]答案

【问题标题】：Centering Buttons With Bootstrap 4 [duplicate]Bootstrap 4的居中按钮[重复]
【发布时间】：2019-10-16 14:21:30
【问题描述】：

嗨，我有这个屏幕：

它需要在手机、平板电脑和台式机上都可以查看。使用 BootStrap 4

我想要的是每个按钮的最大宽度以及按钮在屏幕上居中的位置。

这是我的 html/css：

<!DOCTYPE html>
<html lang="en">

<head>
<title>Cacophonator Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="max-width=device-max-width, initial-scale=1">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<style> a { max-width: 400px; } </style>
</head>

<body>
{{template "navbar"}}

<div class="container">
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/camera" role="button">Camera</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/disk-memory" role="button">Disk &amp; Memory</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/network" role="button">Network</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/wifi-networks" role="button">WiFi Networks</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/speaker" role="button">Speaker Test</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/location" role="button">Location</a>
            </div>
        </div>

</div>

<script src="/static/js/jquery-3.3.1.slim.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>

<script>
    $(document).ready(function(){
        $("#btnBack").hide();
    });
</script>

任何帮助将不胜感激，谢谢。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

只需添加以下样式：

<style> 
.row div{ 
    display: flex; 
    justify-content: center; 
} 

.btn-block{
    max-width: 400px;
}
</style>

结果：

<head>
<title>Cacophonator Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="max-width=device-max-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style> 
.row div{ 
  display: flex; 
  justify-content: center; 
} 

.btn-block{
  max-width: 400px;
}
</style>
</head>

<body>
{{template "navbar"}}

<div class="container">
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/camera" role="button">Camera</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/disk-memory" role="button">Disk &amp; Memory</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/network" role="button">Network</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/wifi-networks" role="button">WiFi Networks</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/speaker" role="button">Speaker Test</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 w-100" >
                <a class="btn btn-primary btn-block mt-3" href="/location" role="button">Location</a>
            </div>
        </div>

</div>

<script src="/static/js/jquery-3.3.1.slim.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>

【讨论】：

就是这样。我知道这很简单，但我是 BootStrap、HTML、CSS 等的新手。非常感谢您的快速响应。

【解决方案2】：

.container {
position : absolute;
left : 50%;
top :50%;
transform : translate(-50%,-50%);
}

【讨论】：

不宜使用 position: absolute