将div居中于div中。内部的div必须小于父div。引导程序4

Question

我只想在div内有一个div，如下图所示：

是否有可能。我的意思是。为什么在世界上如此困难。我只希望将Mofo div放在mofo div的中央，但不希望宽度/高度为100％。

我的代码：

<!-- Fotos servicios -->
<div id="div-servicios" class="container mt-2 mb-4">
    <div  class="row justify-content-center align-items-center fondo-negro-trans">
        <div id="serv-titulo" class="display-4 text-uppercase">
            <b>cortes</b>
        </div>
    </div>
    <div class="rowfondo-negro-trans text-muted">
            <p class="lead">
                    Cortar con frecuencia el cabello, por lo menos cada tres meses, ayuda a eliminar las puntas dobles.

                    Quienes tienen el cabello con tratamientos químicos, como coloraciones o alisados permanentes necesitan de cuidados extra. 
            </p>
        </div>
</div>

CSS：

#div-servicios {
    background-image: url("../media/index/index-f2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 566px !important;
}

#serv-titulo{
    margin: 60px;
    left: 100px;    
}

Answer 1

您可以通过多种方式执行此操作。这是其中一种，使用绝对定位：

.outer-div {
border: 3px solid green;
width: 600px;
height: 300px;
position: relative;
}

.inner-div {
border: 3px solid red;
width: 300px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

<div class="outer-div">
<div class="inner-div">
</div>
</div>

这是另一个使用flexbox的示例：

.outer-div {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid red;
  height: 400px;
}

.inner-div {
border: 3px solid green;
width: 50%;
height: 50%;
}

<div class="outer-div">
<div class="inner-div">

</div>
</div>

Answer 2

您可以使用flex和margin:auto将一个组件居中放置在另一个组件内部，并使它响应。

#parent {
  border: 1px solid black;
  display: flex;
  position: relative;
  height: 100vh;
  width: 100vw;
}

#child {
  border: 1px solid black;
  width: 80%;
  height: 80%;
  margin: auto;
}

<div id="parent">
  <div id="child">
    Lorem ipsum
  </div>
</div>

Answer 3

要使其完全响应，请尝试以下代码。

// html file
<div class="container">
        <div class="outer-div">
                <div class="inner-div">
                </div>
        </div>
</div> 

在您的CSS文件中使用此代码。

.outer-div {
   border: 3px solid blue;
   height: 300px;
   position: relative;
}

.inner-div {
   border: 3px solid goldenrod;
   width: 50%;
   height: 50%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}