cool.css

// For centering on the page, the modern solution is to use 'flexbox'.
// You'll need a container the height and width of the screen, to be able
// to position content within it.

// So, for HTML that looks like this:

<div class="container">
  <div class="content">
    Orchestra etc...
  </div>
</div>

// CSS like this will do the trick:

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

// BUT!!!!! For a container with multiple elements,
// a little bit more thought is involved. There are various
// ways to position content - it can fill up the available space,
// bunch in the middle, spread evenly etc.

// So, for this HTML:

<div class="container">
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
</div>

// This CSS will put them all in the middle by
// using a column-based flexbox model:

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

// You can also use `justify-content: space-around`, 
// `justify-content: space-between` and `justify-content: space-evenly`
// to check out other options.

// Have a look at https://css-tricks.com/snippets/css/a-guide-to-flexbox/
// for a better explanation.