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>