Question

我有一个高度为300px且宽度为自动的div，在这个div中其他div带有文本，我需要这个结果：

这是我的代码HTML：

   <section class="black-block">
<div class="container">
  <div class="row">
    <article class="col-xs-4 col-sm-4 col-md-4">
      <!-- Empty content -->
    </article>
    <article class="col-xs-4 col-sm-4 col-md-4">
      <h3 class="text-center">My title</h3>
    </article>
    <article class="col-xs-4 col-sm-4 col-md-4">
      <!-- Empty content -->
    </article>
  </div>
</div>

这是我的代码CSS：

.title {
  margin-top: 50px;
  margin-bottom: 50px;
  height: 100%;
}

.back-block {
  height: 300px;
  background: rgb(0, 0, 0);
  margin-bottom: 30px;
}

h3 {
  color: rgb(255, 255, 255);
}

h4 {
  color: rgb(255, 0, 0);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>StackOverFlow</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

</head>

<body>

  <!-- Black part -->
  <section class="back-block">
    <div class="container">
      <div class="row">
        <article class="col-xs-4 col-sm-4 col-md-4">
          <!-- Contenido vacio -->
        </article>
        <article class="title col-xs-4 col-sm-4 col-md-4">
          <h3 class="text-center">Text that i want centre</h3>
        </article>
        <article class="col-xs-4 col-sm-4 col-md-4">
          <!-- Contenido vacio -->
        </article>
      </div>
    </div>
  </section>
  
  <!-- Latest compiled and minified JavaScript -->
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>

</html>

如何获得图像结果？

Answer 1

use flexbox with:

  display: flex;
  align-items: center;
  justify-content: center;

.title {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50px 0;
}

.back-block {
  height: 300px;
  background: rgb(0, 0, 0);
  margin-bottom: 30px;
}

h3 {
  color: rgb(255, 255, 255);
}

h4 {
  color: rgb(255, 0, 0);
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>StackOverFlow</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

</head>

<body>

  <!-- Black part -->
  <section class="back-block">
    <div class="container">
      <div class="row">
        <article class="">
          <!-- Contenido vacio -->
        </article>
        <article class="title">
          <h3 class="text-center">Text that i want centre</h3>
        </article>
        <article class="">
          <!-- Contenido vacio -->
        </article>
      </div>
    </div>
  </section>

  <!-- Latest compiled and minified JavaScript -->
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>

</html>

Answer 2

现在运行你的代码。它可能是你想要的：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>StackOverFlow</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<style>
#title {
display:block;
margin-top: 50px;
margin-bottom: 50px;
position: relative
top: 0;
bottom: 0;
height:100%;
min-height:200px !important;
border:1px solid red;
}

.back-block {
height: 300px;
background: rgb(0, 0, 0);
margin-bottom: 30px;
padding:20px;
}

 h3 {
  color: rgb(255, 255, 255);
 }

h4 {
 color: rgb(255, 0, 0);
}
</style>
</head>

<body>

 <!-- Black part -->
  <section class="back-block" style="display:flex;justify-content:center;align-items:center;">
<div class="container">
  <div class="row">
    <article class="col-xs-4 col-sm-4 col-md-4">
      <!-- Contenido vacio -->
    </article>
    <article id="title" style="display:flex;justify-content:center;align-items:center;" class="col-xs-4 col-sm-4 col-md-4">
      <h3 class="text-center">Text that i want centre</h3>
    </article>
    <article class="col-xs-4 col-sm-4 col-md-4">
      <!-- Contenido vacio -->
    </article>
  </div>
</div>
  </section>


 <!-- Latest compiled and minified JavaScript -->
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">
</script>
</body>
</html>

其他div中的Bootstrap，center div

2 个答案: