css图片相对页面居中 |css after 动态值

在开始之前，大家需要明确一点：单纯地将图片相对于页面居中是比较简单的。但如果要解决在不同尺寸的屏幕上都能居中这个问题，则需要使用一些技巧。

首先，大家需要在HTML中定义一个容器元素来包含图片。例如：

<div class="container">
<img src="example.jpg" alt="Example">
</div>

接下来，大家需要在CSS中定义这个容器元素的样式。大家可以使用以下代码来使容器元素相对于页面水平居中，并且使图片相对于容器垂直和水平居中：

.container {
position: relative;
display: flex; /* 让子元素在容器中水平居中 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.container img {
max-width: 100%; /* 防止图片过大超出容器 */
max-height: 100%; /* 同上 */
}

大家可以看到，这里使用了Flexbox来让容器内的子元素（图片）水平居中。同时，通过设置容器的align-items属性和子元素的max-height属性，可以使图片相对于容器垂直居中。

以上代码可以在大部分情况下实现图片居中的效果。但如果大家需要解决适应不同屏幕尺寸的问题呢？这里有一个小技巧。

大家可以使用CSS的vw（视口宽度）单位来设置容器元素的宽度。例如，如果大家想让容器元素在不同屏幕尺寸下都占整个屏幕的一半宽度，可以这样设置：

.container {
width: 50vw; /* 占屏幕一半宽度 */
margin: 0 auto; /* 水平居中 */ 
}

这里使用了margin: 0 auto;属性来将容器元素水平居中。由于容器元素是相对于屏幕宽度设置宽度的，因此可以在不同尺寸的屏幕上实现中心对齐的效果。

综上所述，大家可以使用以上技巧来在网页中实现图片相对于页面的居中。