How do you easily horizontally center using CSS?

Question :

I'm trying to focus horizontally a block element on one page and put it in minimum width. The easiest way to do this is what? I want element is inline with the rest of my site. I will try to draw an example:

Answer 1. center horizontal css
Css

#wrapper {
  background-color: green; /* for visualization purposes */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for visualization purposes */
  display: inline-block;
}

Answer 2: center div in div horizontally
CSS

.centre {
  width: 200px;
  display: block;
  background-color: #eee;
  margin-left: auto;
  margin-right: auto;
}

Answer 3:
CSS

.layout {
  text-align: center;
}
.centre {
  text-align: left;
  width: 200px;
  background-color: #eee;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Answer 4:
CSS

.container {
  display: flex;
  justify-content: center;
}

Answer 5:
CSS

.container {
  display: flex;
  flex-direction: column;
}
.centered {
  align-self: center;
}