Simplemente añade `display: inline-block` al `<div>` interior y lo centras añadiendo `text-align: center` al `<div>` exterior. Quedaría así: <!-- begin snippet: js hide: false --> <!-- language: lang-css --> .interno { height: 20px; width: 50%; background-color: green; display: inline-block; } .externo { background-color: red; width: 200px; padding: 20px; text-align: center; } <!-- language: lang-html --> <div class="externo"> <div class="interno"> Hola </div> </div> <!-- end snippet -->