html - 将 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;    
}

标签： htmlcsstwitter-bootstrap

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>