CSS作为网页设计中最基础、必不可少的技术之一，有着极其强大的排版能力。通过使用CSS，我们可以实现网页上各种元素的优美排列和界面布局。其中，如何将图片居中是很多前端工程师所需要掌握的技巧之一。
首先，我们可以通过使用CSS的“text-align”属性将图片水平居中。在对应图片的CSS样式中添加如下代码：
```css
img {
display: block;
margin: 0 auto;
}
```
其中，“display: block”指定图片为块级元素，能够占据整个页面的宽度，保证图片居中会自动适应页面大小；“margin: 0 auto”则指定图片的上下外边距为0，左右外边距自动居中，从而达到图片水平居中的效果。
如果我们需要实现图片垂直居中，同样可以使用CSS实现。在对应图片的父元素CSS样式中添加如下代码：
```css
.parent{
display: flex;
justify-content: center;
align-items: center;
}
```
其中，“display: flex”将其父元素设为弹性盒子，使得其内部子元素能够自适应、伸缩；“justify-content: center”和“align-items: center”则是让子元素在水平和垂直中间对齐。
除了以上两种方法，还有一种实现居中的常用技巧是使用绝对定位或相对定位。首先要将父级元素设置为定位容器，比如：
```css
.parent{
position: relative;
}
```
然后在对应图片的CSS样式中添加如下代码：
```css
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
其中，“position: absolute”用于指定元素的定位方式，top和left则是指定图片的上下和左右边距分别为50%，也就是在容器的中心位置；最后的“transform: translate(-50%, -50%)”则是将图片向左上方移动50%的宽高，从而实现垂直和水平方向的居中对齐。
以上就是三种常用的方法，通过掌握它们，我们就能够更加优美地排版网页上的各种元素了。