当你在一个网页的前端工作时，你有时需要在一个div （容器）内将一个图像居中。
这有时会变得很棘手。而且基于某些条件，某种特定的方法在某些时候可能不起作用，使你不得不寻找替代方法。
在这篇文章中，你将学习如何用CSS将div 中的图像居中。
如何用CSS将div 居中
你可以通过两种方式将div 中的图像居中：水平方向和垂直方向。当你把这两种方法结合起来时，你将得到一个完全居中的图像。
默认情况下，网页内容总是从屏幕的左上角开始，从ltr （从左到右）--除了某些语言，如阿拉伯语，从rtl （从右到左）。
让我们先看看如何在div ，将图像水平居中。然后，我们将看到如何在垂直方向上居中。最后，我们将看到你如何将两者结合起来做。
如何在Div中用Text-align将图像水平居中
假设你有一个div ，你以这种方式放置你的图片：
<div class="container">
<img src="./fcc-logo.png" alt="FCC Logo" />
</div>
并应用基本的CSS样式，使你的图像可见。
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
}
.container img {
width: 100px;
}
text-align 的方法并不是在所有情况下都适用，因为你通常用它来居中处理文本。但是，当你把你的图片放在一个块级的容器中时，比如div ，那么这个方法就能发挥作用：
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
text-align: center;
}
.container img {
width: 100px;
}
这个方法的作用是将text-align 属性与它的值center 一起添加到容器中，而不是图像本身。
如何用自动边距将Div中的图像水平居中
另一种方法是，你可以使用div （容器）中的图像水平居中，即使用margin 属性，值为auto 。
然后，该元素将占据指定的 width ，剩余的空间将在左右边距之间平分。
你通常会将这个方法应用于图片本身，而不是容器。但不幸的是，仅凭这个属性是不行的。你还需要首先指定图像将采取的width 。这可以让margin知道容器的剩余宽度，从而可以平分。
其次，img 是一个内联元素，而margin-auto 属性设置并不影响内联级元素。这意味着你必须先把它转换为一个块级元素，display 属性设置为block：
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
}
.container img {
width: 100px;
margin: auto;
display: block;
}
如何使用定位和变换属性将Div中的图像水平居中
另一个可以用来水平定位图片的方法是position 属性和transform 属性。
这个方法可能非常棘手，但它是有效的。你必须首先将容器的position 设置为relative ，然后将图像设置为absolute 。
一旦你这样做了，你现在就可以使用图像上的left 、top 、bottom 或right 属性将图像移动到你想要的任何位置。
在这个例子中，你只想把图像水平地移动到中心位置。这意味着你将通过left 到50%或right 到-50%来移动图像：
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
position: relative;
}
.container img {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
}
但是，当你检查你的图像时，你会发现图像仍然没有完美地放置在中心。这是因为它是从50%的标记开始的，也就是中心位置。
在这种情况下，你需要使用transform-translateX 属性来调整它，以获得水平方向上的完美中心：
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
position: relative;
}
.container img {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
如何用Display-Flex将Div中的图片水平居中
CSS Flexbox使你更容易设计灵活的、响应式的布局结构，而不需要使用浮动或定位。我们也可以使用这个方法，使用以flex为值的display属性，将图像水平放置在容器的中央。
但仅仅这样做是不行的。你还需要定义你要的图片的位置。这可能是center, left ，也可能是right：
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
display: flex;
justify-content: center;
}
.container img {
width: 100px;
height: 100px;
}
注意： display: flex 属性在旧版本的浏览器中不被支持。你可以在这里阅读更多信息。你还会注意到，定义了图像的宽度和高度，以确保图像不会缩水。
现在让我们来学习如何在div ，使图像垂直居中。稍后我们将看到如何将div 中的图像在水平和垂直方向上一起居中，使其成为一个完美的中心。
如何用Display-Flex将图像垂直居中
就像你如何用display-flex方法将图像水平居中一样，你也可以在垂直方向上做同样的事情。
但是这一次，你不需要使用justify-content 属性。相反，你将使用align-items 属性：
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
display: flex;
align-items: center;
}
.container img {
width: 100px;
height: 100px;
}
为了使这个方法发挥作用，容器必须有一个指定的height ，你将用它来计算高度，并知道中心的位置。
如何用位置和变换属性在Div中垂直居中图片
类似于你之前使用position 和transform 属性将你的图片在水平方向上置于中心，你也可以在垂直方向上做同样的事情。
但是这一次，你不会使用left 或right, 。相反，你会使用top 或bottom 和translateY ，而不是translateX：
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
position: relative;
}
.container img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
你已经学会了如何使用所有可能的方法在div 内将图像水平和垂直方向居中。现在让我们来学习如何在水平和垂直方向上都居中。
如何使用Display-Flex在Div中水平和垂直居中图片
display-flex 属性是你如何将图像垂直和水平居中的组合。
对于flex方法，这意味着你将同时使用justify-content 和align-items 属性设置为center 。
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
display: flex;
justify-content: center;
align-items: center;
}
.container img {
width: 100px;
height: 100px;
}
如何用位置和变换属性将图像在Div中水平和垂直居中
这也是非常相似的，因为你所要做的就是结合你能够垂直和水平居中的两种方式。
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
position: relative;
}
.container img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
你也可以通过使用translate(x,y) ，将translateX 和translateY：
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
position: relative;
}
.container img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
总结
在这篇文章中，你已经学会了如何在一个div中垂直、水平或两者都居中。
在将图像移至中心时，你通常会使用Flexbox方法，因为position 方法会使你的网页变形，而且工作起来非常棘手。
祝你编码愉快!
