<div class="container">
  <div class="center blue">
    <p>Синий блок расположен по центру, относительно серого</p>
    <img src='https://images.unsplash.com/photo-1562375121-ea1bc3e8fc10?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    <p>При этом его содержимое выравнено по левому краю</p>
  </div>
</div>
/* Стили, относящиеся к этому примеру */
.center {
  margin: auto;
  width: 60%;
}


/* Остальные стили */
.container {
  padding: 48px;
  margin: 24px;
  background: rgba(0,0,0,.1);
  resize: both;
  overflow: auto;
}

.blue {
  padding: 12px 24px;
  background: #2196f3;
}

img {
  padding: 12px;
  background: #fff;
  box-shadow: 2px 1px 6px rgba(0,0,0,.2);
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

p {
  font-family: Roboto;
}

p:first-child {
  font-size: 24px;
  color: #fff;
}

p:last-child {
  font-size: 16px;
  color: rgba(0,0,0,.6);
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Roboto:wght@300&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.