how to auto center an image in a div, when he is resized-CodePudding

I'm making a site that contains some cards of discord users. I put the avatar in a div, and when I hover this, the image expands, but it is going more to the left. I put a border in the card example below to better visualization:

If you see on the right of image when hovered, it is getting closer to the left of the box, while on the left it is fixed. Does anyone know how to make it self-center when it expands, or else, when it goes over, the width of the box also increases along with the height, which already is it increasing automatically in this code?

@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@1,200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
  margin: 0px;
}

#accounts {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

.acc {
  display: inline-block;
  padding: 60px;
  border-style: solid;
  border-width: 1px;
  border-color: aqua;
  width: 200px;
}

.icons {
  border-radius: 50%;
  width: 200px;
  transition: 0.75s;
  object-fit: contain;
  overflow: hidden;
}

.icons:hover {
  width: 250px;
}

.nick {
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;
  white-space: nowrap;
}

#nc1 {
  margin-right: 13px;
}

#nc2 {
  margin-left: 9px;
}

#sc-btn {
  background-color: black;
  display: flex;
  justify-content: center;
  text-align: center;
}

#sc-btn a:visited {
  text-decoration: none;
}

#sc-btn a {
  text-decoration: none;
  margin-right: 8px;
  border-radius: 30px;
}

#server-button {
  padding: 0;
  width: 250px;
  height: 50px;
  border-style: solid;
  border-width: 1.5px;
  border-radius: 30px;
  border-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.75s;
}

#sv-btn-text {
  font-weight: 100;
  font-size: 28px;
  font-family: 'Montserrat', sans-serif;
  color: white;
  margin: 0px;
  padding: 0px;
  transition: 0.75s;
}

#server-button:hover {
  background-color: white;
}

#server-button:hover #sv-btn-text {
  color: black;
}

<div id="accounts">
  <div  id="luiz">
    <a href="https://instagram.com/luizzz28_" target="_blank">
      <img  src="https://images-ext-1.discordapp.net/external/YBEo2ls8xQBT9HVGHsYwkZm3dddiQNZ_njgmk7kHClc/?size=1024/https/cdn.discordapp.com/avatars/707608125825482894/7c8b1fc2a14f2b47122bb3ac5c5bedb1.png">
    </a>
    <h2  id="nc1">luizzz#0001</h2>
  </div>
  <div >
    <a href="https://instagram.com/dmn.juniorr" target="_blank">
      <img  src="https://cdn.discordapp.com/avatars/799372092108832778/6788af224fd81da075b0b05f4e42d4a6.png?size=1024">
    </a>
    <h2  id="nc2">juniorr ƉємƠη#5456</h2>
  </div>
</div>

<section id="sc-btn">
  <a href="https://discord.gg/tcQhcVG">
    <div id="server-button">
      <h1 id="sv-btn-text">demoninhos</h1>
    </div>
  </a>
</section>

<div id="lateral-menu"></div>

CodePudding user response：

Instead of using the width attribute on hover, try using the transform: scale() attribute and using the transform-origin attribute set to the center. You can use pixels, or percent, or whatever with the transform, I just picked a number for the example. You can learn more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@1,200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;

}

body {
    background-color: black;
    margin: 0px;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 5px;
  padding: 5px;
  margin: 0 auto;
}

.accounts {
    margin: 0px;
    padding: 0px;
    text-align: center;
}

.acc {
    display: inline-block;
    padding: 60px;
    border-style: solid;
    border-width: 1px;
    border-color: aqua;
    width: 200px;
    height: 250px;
    margin: 0 0;
}

.icons {
    border-radius: 50%;
    width: 200px;
    transition: 0.75s;
    object-fit: contain;
    overflow: hidden;
}

.icons:hover {
    transform-origin: center;
    transform: scale(1.2);
    padding-bottom: 15px;
    }

.nick {
    color: white;
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    white-space: nowrap;
}

#nc1 {
    margin-right: 13px;
}

#nc2 {
    margin-left: 9px;
}

#sc-btn {
    background-color: black;
    display: flex;
    justify-content: center;
    text-align: center;
}

#sc-btn a:visited {
    text-decoration: none;
}

#sc-btn a {
    text-decoration: none;
    margin-right: 8px;
    border-radius: 30px;
}


#server-button {   
    padding: 0;
    width: 250px;
    height: 50px;
    border-style: solid;
    border-width: 1.5px;
    border-radius: 30px;
    border-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.75s;
}

#sv-btn-text {
    font-weight: 100;
    font-size: 28px;
    font-family: 'Montserrat', sans-serif;
    color: white;
    margin: 0px;
    padding: 0px;
    transition: 0.75s;
}



#server-button:hover {
    background-color: white;
}

#server-button:hover #sv-btn-text {
    color: black;
}

<html lang="pt-BR">
    <head> 
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>$$$$$</title>
        <link rel="stylesheet" type="text/css" href="styles.css" media="screen">
        <link rel="icon" type="image/x-icon" href="./src/favicon.ico">
    </head>
    <body>
    <div >
        <div >
            <div  id="luiz">
                <a href="https://instagram.com/luizzz28_" target="_blank">
                    <img  src="https://images-ext-1.discordapp.net/external/YBEo2ls8xQBT9HVGHsYwkZm3dddiQNZ_njgmk7kHClc/?size=1024/https/cdn.discordapp.com/avatars/707608125825482894/7c8b1fc2a14f2b47122bb3ac5c5bedb1.png">
                </a>
                <h2  id="nc1">luizzz#0001</h2>
            </div>
            </div>
       <div >
            <div >
                <a href="https://instagram.com/dmn.juniorr" target="_blank">
                    <img  src="https://cdn.discordapp.com/avatars/799372092108832778/6788af224fd81da075b0b05f4e42d4a6.png?size=1024">
                </a>
                <h2  id="nc2">juniorr ƉємƠη#5456</h2>
            </div>
        </div>
           </div>
        <section id="sc-btn">
            <a href="https://discord.gg/tcQhcVG">
                <div id="server-button">
                    <h1 id="sv-btn-text">demoninhos</h1>
                </div>
            </a>
        </section>

        <div id="lateral-menu"></div>  
    </body>
</html>

CodePudding user response：

For CSS:

background-image: background-posution: center;

For img:

<div align=center><img src=... style=width:50vw;></div>