Skip to main content

Simplemente añade display: inline-block al <div> interior y lo centras añadiendo text-align: center al <div> exterior. El CSS te quedaría

Quedaría así:

.interno {
  height: 20px;
  width: 50%;
  background-color: green;
  display: inline-block;
}
.externo {
  background-color: red;
  width: 200px;
  padding: 20px;
  text-align: center;
}

  .interno {
    height: 20px;
    width: 50%;
    background-color: green;
    display: inline-block;
  }
  .externo {
    background-color: red;
    width: 200px;
    padding: 20px;
    text-align: center;
  }
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>

Simplemente añade display: inline-block al <div> interior y lo centras añadiendo text-align: center al <div> exterior. El CSS te quedaría así:

.interno {
  height: 20px;
  width: 50%;
  background-color: green;
  display: inline-block;
}
.externo {
  background-color: red;
  width: 200px;
  padding: 20px;
  text-align: center;
}

Simplemente añade display: inline-block al <div> interior y lo centras añadiendo text-align: center al <div> exterior.

Quedaría así:

  .interno {
    height: 20px;
    width: 50%;
    background-color: green;
    display: inline-block;
  }
  .externo {
    background-color: red;
    width: 200px;
    padding: 20px;
    text-align: center;
  }
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>

Origen Enlace

Simplemente añade display: inline-block al <div> interior y lo centras añadiendo text-align: center al <div> exterior. El CSS te quedaría así:

.interno {
  height: 20px;
  width: 50%;
  background-color: green;
  display: inline-block;
}
.externo {
  background-color: red;
  width: 200px;
  padding: 20px;
  text-align: center;
}