Question

每当我使用bootstrap编写代码时，我就会遇到这个问题。我想将内容与屏幕中心对齐。我总是写这样的代码：

<div class="container h-100">
    <div class="row">
        <div class="col-md-4 col-sm-12"></div>
        <div class="col-md-4 col-sm-12">
            Content here   
        </div>
        <div class="col-md-4 col-sm-12"></div>
    </div>
</div>

含义我有3列，我会在中间列中编写代码，因此内容将位于屏幕的中心。

如果我想在中间列中集中对齐文本和按钮，还有另一个问题，我总是写3个列......

这是我的意思的一个例子：

https://jsfiddle.net/20f24vLv/11/

有没有办法避免这种情况......我认为这需要花费太多时间和代码

Answer 1

只需添加文本中心类即<div class="col-md-4 col-sm-12 text-center"></div>

Answer 2

使用bootstrap偏移类使div居中水平并使用flexbox水平和垂直对齐内部内容中心

＆＃13;

#mydiv2 {
  background-color: red;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-xs-4 col-xs-offset-4">
      <div id="mydiv2">
        <button type="button" class="btn btn-primary btn-lg">Button</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

使用偏移而不是之前添加列。如果您关闭内容之后的行，则不需要最后一列：

<div class="container h-100">
  <div class="row">
    <div class="col-md-4 col-md-offset-4 col-sm-12">
        Content here   
    </div>
  </div>
</div>

Answer 4

＆＃13;

.btn_wrapper{
  background-color:red;
  height:300px; 
  max-width: 300px;
  margin: 0 auto;
}

.btn_wrapper button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="container">
  <div class="row">
     <div class="col-md-4 col-md-offset-4 btn_wrapper">
          <button type="button" class="btn btn-primary btn-lg">Button
          </button>
     </div>
  </div>
</div>

＆＃13;

Answer 5

在这种情况下，添加margin: 0 auto就足够了。

＆＃13;

#mydiv1{
  background-color:#000;
  width:300px;
  height:300px;
  margin:0 auto;
}
#mydiv2{
  background-color:red;
  width:300px;
  height:300px;
  margin:0 auto;
}
#mydiv3{
  background-color:lime;
  width:300px;
  height:300px;
  margin:0 auto;
}

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-12">
      <div id="mydiv1">     
      </div>
    </div>
     <div class="col-md-4 col-sm-12">
      <div id="mydiv2">
        <div class="col-md-4 col-sm-12"></div>
        <div class="col-md-4 col-sm-12">
          <button type="button" class="btn btn-primary btn-lg">Button
          </button>
        </div>
        <div class="col-md-4 col-sm-12"></div>
      </div>
    </div>
     <div class="col-md-4 col-sm-12">
      <div id="mydiv3">

      </div>
    </div>
  </div>
</div>

＆＃13;

@edit

此外：

<div class="container h-100">
    <div class="row">
        <div class="col-md-3 col-sm-12"></div>
        <div class="col-md-3 col-sm-12">
            Content here   
        </div>
        <div class="col-md-3 col-sm-12"></div>
    </div>
</div>

不会将您的内容放在中心位置，因为列必须加起来为12个。在您的情况下，它们最多只能添加9个，必须为col-md-4

如何使用col-md水平对齐内容

5 个答案: