我有以下代码:
function seeMore() {
window.location("https://inderatech.com/index.html")
}
.see-more {
display: table;
margin-right: auto;
margin-left: auto;
}
.avatar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 10%;
overflow: hidden;
/* Subtle inner border */
box-shadow: inset 0 0 1px 1px rgba(0,0.015);
}
.avatar img {
height: 70%;
width: 70%;
z-index: 2;
/* Optionally add a drop shadow to the main image */
/* to make it feel "lifted" */
filter: drop-shadow(0 1px 4px rgba(0,0.12));
}
.avatar .background {
position: absolute;
z-index: 1;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(2);
filter: blur(13px) opacity(0.2);
}
/* Irrelevant styling */
.Mycontainer {
/* width: 200px; */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
place-items: center;
width: 50%;
margin: 0 auto;
}
<div class="container">
<div class="section-title text-center">
<h2>Recent Clients</h2>
</div>
</div>
<div class="Mycontainer">
<a href="https://www.6ixangels.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./6ixangels-logo.png" class="background" />
<img alt="Avatar" src="./6ixangels-logo.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./exproducts-treansparne.png" class="background" />
<img alt="Avatar" src="./exproducts-treansparne.png" width="100" height="100" />
</div>
<a href="https://www.marcosbackyardswimming.ca" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./mss-transparent.png" class="background" />
<img alt="Avatar" src="./mss-transparent.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./6ixfoods-transparent.png" class="background" />
<img alt="Avatar" src="./6ixfoods-transparent.png" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" class="background" />
<img alt="Avatar" src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" class="background" />
<img alt="Avatar" src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" width="100" height="100" />
</div>
<a href="https://app.cleaningassistant.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" class="background" />
<img alt="Avatar" src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" width="100" height="100" />
</div>
</a>
<a href="https://www.beaniesforbaxter.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./beaniesforbaxter-transparent.png" class="background" />
<img alt="Avatar" src="./beaniesforbaxter-transparent.png" width="100" height="100" />
</div>
</a>
<a href="https://6ixhottub.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./transparent-6ixhottub.png" class="background" />
<img alt="Avatar" src="./transparent-6ixhottub.png" width="100" height="100" />
</div>
</a>
</div>
<br>
<br>
<div class="see-more">
<a href="site-pictures.html"><input type="submit" class="btn btn-defeault btn-send" value="See More"></a>
</div>
在桌面版本上,它看起来不错,但是如果它在较窄的屏幕上呈现,那么您会看到它没有正确地在页面上水平居中。我应该在 CSS 中更改哪些内容以将 div 置于页面中央?