How can i align a image link to the middle with css-CodePudding

So I have this image I'm trying to align to the middle of the web frame with my CSS file style.css but I'm not sure how to, how can I do this?

body {
  background-color: black;
}
h1 { 
  text-align: center; font-family: sans; color: blue;
}
p {
 text-align: center; font-family: sans; color: white;
}

a {
  text-align: center;
}

<h1>Pages</h1>
<p><a href="html/page2.html">Page Two</a></p>
<p><a href="html/page3.html">Page Three</a></p>
  
<a href="#"><img src="https://via.placeholder.com/100.jpg" alt="Discord" style="width:42px;height:42px;"></a>

CodePudding user response：

Wrap your a tag in a flex container.

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

.container a img {
  width: 300px;
  height: 300px;
}

<div >
  <a href="https://en.wikipedia.org/wiki/Universe">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/69/NASA-HS201427a-HubbleUltraDeepField2014-20140603.jpg" />
  </a>
</div>

Alternatively you can wrap it in a grid container and place items center and set the width and height to 100vw/vh respectively.

.container {
  display: grid;
  place-items: center;
  height: 100vh;
  width: 100vw;
}

.container a img {
  width: 200px;
  height: 200px;
}

<div >
      <a href="https://en.wikipedia.org/wiki/Universe">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/69/NASA-HS201427a-HubbleUltraDeepField2014-20140603.jpg" />
      </a>
    </div>

CodePudding user response：

Simple solution:

<a href="#"><img src="https://via.placeholder.com/100.jpg" alt="Discord" style="width:42px;height:42px;display:block;margin-left:auto;margin-right:auto"></a>