<div id="flex-container">     // THE CONTAINER //
        <ul id="button-container">
            <li>
                <a id="html-modal-button">
                    <img class="htmllogo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/HTML5_Badge.svg/600px-HTML5_Badge.svg.png">
                    <div class="html-text-block">
                        <h2>HTML</h2>
                        <p>My web projects</p>
                    </div>
                </a>
            </li>
            <li>
                <a id="cs-modal-button">
                    <img class="csharplogo" src="https://camo.githubusercontent.com/0617f4657fef12e8d16db45b8d73def73144b09f/68747470733a2f2f646576656c6f7065722e6665646f726170726f6a6563742e6f72672f7374617469632f6c6f676f2f6373686172702e706e67">
                    <div class="cs-text-block">
                        <h2>C#</h2>
                        <p>My windows projects</p>
                    </div>
                </a>
            </li>
        </ul>
  </div>

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

margin-top: 35vh;
margin-left: 50vw;
transform: translate(-50%, -50%);