Question

所以我在我的网站上有一个图像，我想完美地集中它。我尝试过很多东西，但都没有。

body{
background-color: black;
}

img {
  position: absolute;
  margin-top: 10%;
  text-align: center;
  height: 40%;
  z-index: -5
}

<img src="images/astronaut.png">

Answer 1

水平居中图像的最简单方法是：

img {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

Answer 2

喜欢这个吗？

body{
background-color: black;
}

img {
  position: absolute;
  margin-top: 10%;
  text-align: center;
  height: 40%;
  z-index: -5;
  left: 50%;
  top:50%;
  transform: translate(-50%, -50%);
}

<img src="images/astronaut.png">

居中代码为left，top，尤其是transform

Answer 3

请查看以下链接以获取进一步的帮助，希望有所帮助。

https://www.w3.org/Style/Examples/007/center

https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

＆＃13;

html { 
  width: 100%; 
  height: 100%; 
  background:url(http://tse4.mm.bing.net/th?id=OIP.IX1fAIIUJ82DtdfgR2tSnADhEs&w=207&h=276&c=8&qlt=90&o=4&dpr=2&pid=1.7) center center no-repeat;
}

＆＃13;

Answer 4

如果您的位置未设置或设置为相对位置，则将左右边距设置为自动会使图像在其父级内水平居中。

所以你可以使用：

img {
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  height: 40%;
  z-index: -5
}

如果您的位置需要设置为绝对值，则可以使用CSS3的视口大小来居中显示图像。这会将图像放在页面的正中心;因此，如果您想将图像置于侧边栏中心，请不要使用此方法。您需要为图像设置宽度，然后使用＆＃34; left＆＃34;属性。这看起来像这样：

img {
  position: absolute;
  margin-top: 10%;
  text-align: center;
  height: 40%;
  z-index: -5
  width: 500px;
  left: calc( 50vw - 250px );
}

视口总是100vw宽，因此将左侧属性设置为50vw - 图像宽度的1/2将使其居中在页面上。

您还可以使用jQuery来类似地计算正确的对齐方式并定位元素。

Answer 5

您可以将图像放入div中，使其在宽度和高度上均为100％然后添加text-align：center;使其水平居中然后将行高设置为100％，然后添加vertical-align：middle;到图像垂直居中。

body{
background-color: black;
}

   .CenterImage img {

  height: 40%;
  z-index: -5;
vertical-align: middle;

}
.CenterImage{
width:100vw;
height:100vh;
line-height: 100vh;
text-align:center;
}

<div class="CenterImage"><img src="images/astronaut.png"></div>

Answer 6

body{
background-color: black;
}

img {
  position: absolute;
  text-align: center;
  height: 40%;
  top: 50%;
  left: 50%;
  z-index: -5
}

<img src="images/astronaut.png">

我怎样才能完美地塑造我的形象？

6 个答案: