Bootstrap列的中心内容

Question

我的问题是如何将bootstrap列的内容垂直居中放置，当我为overlay div设置width: 100%和height: 100%时会出现问题，那么解决方案是什么：

我需要做的示例图片：

<小时/> 以下是我的代码：

＆＃13;

＆＃13;

var coverSection = $(".cover-table");
    $(coverSection).height($(window).height());

＆＃13;

.cover-table{
    display:table;
    width:100%;
    text-align:center;
    background-image:url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg");
    background-size:cover;
    background-attachment:fixed;
    color:white;
    .cover-cell{
        display:table-cell;
        vertical-align:middle;
        .overlay{
            width:100%;
            height:100%;
            background-color:rgba(22, 22, 22, 0.80);
        }
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="cover-table">
    <div class="cover-cell">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="cover-nested">
                            <h4>Hello World</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

＆＃13;

＆＃13;

＆＃13;

注意：请在整页中运行代码段

Answer 1

使用flex。在cover-table：

中修改以下内容

.cover-table{
   display:flex;
   align-items:center;
   justify-content:center;
}

这是一个工作片段。

var coverSection = $(".cover-table");
    $(coverSection).height($(window).height());

.cover-table{
    display:flex;
    align-items:center;
  justify-content:center;
    width:100%;
    text-align:center;
    background-image:url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg");
    background-size:cover;
    background-attachment:fixed;
    color:white;
    .cover-cell{
        display:table-cell;
        vertical-align:middle;
        .overlay{
            width:100%;
            height:100%;
            background-color:rgba(22, 22, 22, 0.80);
        }
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="cover-table">
    <div class="cover-cell">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="cover-nested">
                            <h4>Hello World</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 2

当您使用display:table .cover-table时，您可以将display:table-row设置为.cover-cell，将display:table-cell vertical-align:middle设置为.overlay

var coverSection = $(".cover-table");
    $(coverSection).height($(window).height());

.cover-table{
    display:table;
    width:100%;
    text-align:center;
    background-image:url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg");
    background-size:cover;
    background-attachment:fixed;
    color:white;
}
.cover-cell{
  display:table-row;
}
.overlay{
  width:100%;
  height:100%;
  background-color:rgba(22, 22, 22, 0.80);
  display:table-cell;
  vertical-align:middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="cover-table">
    <div class="cover-cell">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="cover-nested">
                            <h4>Hello World</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 3

密码：

.overlay {
  height: 100vh;
  width: 100vw;
  position: relative;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}

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

＆＃13;

＆＃13;

// Unneeded, see CSS note
//var coverSection = $(".cover-table");
//    $(coverSection).height($(window).height());

＆＃13;

.cover-table {
  display: table;
  height: 100vh;
  /* This has the same effect as JS code. */
  width: 100%;
  text-align: center;
  background-image: url("http://mlmconsultantsblog.com/wp-content/uploads/2010/02/man-working-on-laptop-dreamstime_7728015.jpg");
  background-size: cover;
  background-attachment: fixed;
  color: white;
  .cover-cell {
    display: table-cell;
    vertical-align: middle;
    .overlay {
      width: 100%;
      height: 100%;
      background-color: rgba(22, 22, 22, 0.80);
    }
  }
}
.overlay {
  height: 100vh;
  width: 100vw;
  position: relative;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}


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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="cover-table">
  <div class="cover-cell">
    <div class="overlay">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="cover-nested">
              <h4>Hello World</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 4

只需添加此CSS，文本就会对齐中心。

<强> CSS：

.cover-cell {
    display: table-cell;
    vertical-align: middle;
}