How do I center 3 horizontally-arranged images on a page?

Question

I have a very simple HTML/CSS webpage.

I have three images arranged horizontally on the page, like so:

I'd like to center them on the page, like so:

What's the fix?

Here's the (not-working) code I'm currently using:

.sketches {
  align-content: center;
}
img {
  border-radius: 50%;
  border: 1px solid #000000;
}

<div class="sketches">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

Answer 1

Since <div> by default is a block element and <img> is an inline-block element, if you wanna center images horizontally, it's enough to set text-align: center; to div container:

.sketches {
   text-align: center;
}

img {
   border-radius: 50%;
   border: 1px solid #000000;
}

<div class="sketches">
        <img src="image1.jpg">
        <img src="image2.jpg">
        <img src="image3.jpg">
</div>

Answer 2

Here's the solution:

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.sketches {
  align-content: center;
  margin-left: auto;
  margin-right: auto;
}
img {
  border-radius: 50%;
  border: 1px solid #000000;
}

<div class="outer">
  <div class="middle">
    <div class="sketches" align=center>
      <img src="image1.jpg">
      <img src="image2.jpg">
      <img src="image3.jpg">
    </div>
  </div>
</div>

Used technique to center vertically from here.

Answer 3

CSS

a) .sketches selector

---

   1) Insert display: flex; declaration
   2) Instead of the CSS property: align-content add justify-content

.sketches {
 display         : flex;
 justify-content : center;
  
 /* can be removed */
 min-width : 350px;
}

img {
 border-radius: 50%;
 border: 1px solid #000000;
}

<div class="sketches">
        <img src="image1.jpg">
        <img src="image2.jpg">
        <img src="image3.jpg">
</div>