HTML y CSS: Varias formas de alinear un DIV dentro de otro DIV

Esto es lo que hay, tres elementos dentro de un contenedor:

Este es el HTML:

Este es el CSS:

#container{
 height: 400px;
 width: 700px;
 background-color: orange;
}

#item{
 height: 100px;
 width: 200px;
 background-color: yellow;
 border: 1px solid black;

}

Primero hay que agregar la propiedad de display:inline-block; a los items para que se ordenen en una sola linea

Ahora podemos alinear verticalmente aplicando display:flex; align-items:center en el contenedor y margin:0 auto; en los elementos internos para alinear horizontalmente. El resultado:

Y aqui el CSS:

#container{
 height: 400px;
 width: 700px;
 background-color: orange;
        display:flex;
        align-items:center;
}

#item{
 height: 100px;
 width: 200px;
 background-color: yellow;
 border: 1px solid black;
 display: inline-block;
        margin: 0 auto;
}