我正在尝试创建一个网页，其中图像在滚动时保持在视口中央。但是，我在 CSS 方面遇到了一些问题。现在，图像正在向下滚动，但一旦到达视口的中心，它就会偏移其高度的 50%，使其看起来不合适。
请花一些时间查看我当前的代码库。滚动时初始部分出现一些错误行为。
html,
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
h1 {
margin: 16px;
}
p {
margin: 16px;
}
.container {
display: flex;
}
.text-container {
width: 50%;
}
img {
position: sticky;
top: 50%;
width: 100%;
height: auto;
transform: translateY(-50%);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
As I wandered through the endless expanse of the sprawling cityscape, with towering buildings on either side that
seemed to stretch toward the heavens, their reflective glass windows capturing the ever-changing hues of the sky as
the day transitioned into night, I couldn’t help but feel a sense of smallness, a kind of insignificance in the
grand scheme
of things, yet at the same time, there was this unmistakable undercurrent of being part of something much larger, as
though the intricate web of human lives, crisscrossing each other like invisible lines of connection, brought us all
together in a shared experience, and as the streetlights flickered on one by one, casting their warm glow on the
cracked
pavements below, the hum of traffic and the distant chatter of people became the background music to the unfolding
scene, a soundtrack of urban life that continued relentlessly, day in and day out, without pause, without a moment
to catch its breath, and in that moment, I felt myself being swept up in the rhythm of it all, like a leaf caught in
the swirling currents of a fast-moving river, unsure of where it would end up but unable to resist the pull, and as
I
walked further, my footsteps echoing faintly against the walls of towering buildings that loomed overhead, I noticed
the
small details that often go unnoticed in the rush of everyday life—the weathered bricks of old structures that had
stood
the test of time, the faint graffiti scrawled in hidden corners, messages of rebellion or love or simply the need to
leave a mark, however fleeting, and the way the light caught the delicate drops of rain that had begun to fall,
turning the
street into a shimmering mirror that reflected the city back upon itself, a distorted but beautiful image of a place
that was constantly in flux, never quite the same from one moment to the next, always shifting, evolving, and
growing, just as the people who inhabited it were, each carrying with them their own stories, their own struggles,
and their
own dreams, all weaving together in the vast, complex narrative that was this city, this living, breathing organism
made
up of countless lives intersecting in ways both obvious and subtle, and as I passed by a small park, a rare green
space
amidst the concrete jungle, I saw children laughing and playing, their carefree energy a sharp contrast to the
hurried, tired faces of the adults rushing past, and it struck me how easily we lose that sense of wonder as we grow
older,
how
the weight of responsibilities, of expectations, of the need to achieve and succeed and keep moving forward, often
blinds us to the simple joys that once came so naturally, like the thrill of running through an open field, or the
delight in watching a butterfly flutter by, or the peace that comes from lying on the grass and staring up at the
clouds, imagining shapes and stories in their ever-shifting forms, and I wondered when exactly we lose that, when
does
the world start to seem smaller, less magical, more predictable, more constrained by the rules and limitations that
adulthood imposes, and is it possible to get that sense of wonder back, or is it lost forever, a casualty of the
inevitable march of time, and as I mused on these thoughts, I found myself walking toward the edge of the city,
where
the buildings began to thin out and the noise of the streets faded into a quiet hum, and beyond the city’s limits,
the
landscape opened up into wide, rolling hills that stretched as far as the eye could see, their soft green curves
bathed
in the golden light of the setting sun, and it was here, in this space between the bustling metropolis and the
serene
countryside, that I felt a strange sense of peace, as though I had stumbled upon a hidden threshold, a place where
the
chaos of modern life met the timeless stillness of nature, and as I stood there, looking out at the horizon, I felt
a
deep sense of connection to everything around me, to the city behind me, with its countless lives and stories, and
to
the land before me, with its quiet beauty and ancient rhythms, and it occurred to me that perhaps the key to finding
balance in life lies in these in-between spaces, these moments of transition where we can step back from the rush
and
noise of the world and simply be, without the need to do or achieve or prove anything, and as the sun dipped lower
in
the sky, casting long shadows across the hills, I turned and began the walk back into the city, my mind quieter now,
my
thoughts no longer racing, and as I re-entered the familiar streets, now bathed in the soft glow of twilight, I felt
a
renewed appreciation for the small moments, for the beauty that can be found in the everyday, if only we take the
time
to notice it, and I realized that while the city may seem overwhelming at times, with its constant movement and
endless
demands, it is also a place of infinite possibility, where every person, every street, every corner holds the
potential
for new discoveries, new connections, new stories waiting to be written, and as I continued my journey through the
city,
I found myself paying closer attention to the world around me, noticing the way the light danced on the surface of
the
river that cut through the heart of the city, the way the wind whispered through the leaves of the trees that lined
the
streets, the way the sounds of laughter and conversation echoed off the walls of busy cafes, blending together into
a
symphony of human experience, and I felt grateful to be a part of it, to be alive in this moment, in this place,
with
all its imperfections and challenges, because there is beauty in the struggle, in the impermanence, in the knowledge
that nothing stays the same, that everything is constantly changing, and that we, too, are always growing, learning,
evolving, and that perhaps the greatest adventure of all is not in seeking out some distant, unattainable goal, but
in
embracing the journey itself, in finding meaning and joy in the here and now, in the people we meet, the places we
go,
the experiences we have, and in the quiet moments of reflection that remind us of who we are and what truly matters,
and
as the night began to fall, and the city lights twinkled like stars against the deepening sky, I walked on, my heart
full, my mind at peace, knowing that tomorrow would bring its own challenges, its own surprises, its own moments of
beauty and grace, and that no matter where the road might lead, I would be ready to face it, with open eyes, an open
heart, and a sense of wonder that, though perhaps diminished by the passing of time, still flickered within me, like
a
small but steady flame, reminding me that life, in all its complexity and uncertainty, is a gift, one that we should
never take for granted, and as I made my way back to my home, the familiar streets now quiet in the stillness of the
night, I couldn’t help but smile, grateful for the journey I had taken, both within the city and within myself, and
for
the knowledge that, no matter what the future holds, there is always beauty to be found, always something new to
discover, always a reason to keep moving forward, one step at a time.
</p>
<hr />
<div class="container">
<div class="text-container">
As I wandered through the endless expanse of the sprawling cityscape, with towering buildings on either side that
seemed
to stretch toward the heavens, their reflective glass windows capturing the ever-changing hues of the sky as the
day
transitioned into night, I couldn’t help but feel a sense of smallness, a kind of insignificance in the grand
scheme of
things, yet at the same time, there was this unmistakable undercurrent of being part of something much larger, as
though
the intricate web of human lives, crisscrossing each other like invisible lines of connection, brought us all
together
in a shared experience, and as the streetlights flickered on one by one, casting their warm glow on the cracked
pavements below, the hum of traffic and the distant chatter of people became the background music to the unfolding
scene, a soundtrack of urban life that continued relentlessly, day in and day out, without pause, without a moment
to
catch its breath, and in that moment, I felt myself being swept up in the rhythm of it all, like a leaf caught in
the
swirling currents of a fast-moving river, unsure of where it would end up but unable to resist the pull, and as I
walked
further, my footsteps echoing faintly against the walls of towering buildings that loomed overhead, I noticed the
small
details that often go unnoticed in the rush of everyday life—the weathered bricks of old structures that had stood
the
test of time, the faint graffiti scrawled in hidden corners, messages of rebellion or love or simply the need to
leave a
mark, however fleeting, and the way the light caught the delicate drops of rain that had begun to fall, turning
the
street into a shimmering mirror that reflected the city back upon itself, a distorted but beautiful image of a
place
that was constantly in flux, never quite the same from one moment to the next, always shifting, evolving, and
growing,
just as the people who inhabited it were, each carrying with them their own stories, their own struggles, and
their own
dreams, all weaving together in the vast, complex narrative that was this city, this living, breathing organism
made up
of countless lives intersecting in ways both obvious and subtle, and as I passed by a small park, a rare green
space
amidst the concrete jungle, I saw children laughing and playing, their carefree energy a sharp contrast to the
hurried,
tired faces of the adults rushing past, and it struck me how easily we lose that sense of wonder as we grow older,
how
the weight of responsibilities, of expectations, of the need to achieve and succeed and keep moving forward, often
blinds us to the simple joys that once came so naturally, like the thrill of running through an open field, or the
delight in watching a butterfly flutter by, or the peace that comes from lying on the grass and staring up at the
clouds, imagining shapes and stories in their ever-shifting forms, and I wondered when exactly we lose that, when
does
the world start to seem smaller, less magical, more predictable, more constrained by the rules and limitations
that
adulthood imposes, and is it possible to get that sense of wonder back, or is it lost forever, a casualty of the
inevitable march of time, and as I mused on these thoughts, I found myself walking toward the edge of the city,
where
the buildings began to thin out and the noise of the streets faded into a quiet hum, and beyond the city’s limits,
the
landscape opened up into wide, rolling hills that stretched as far as the eye could see, their soft green curves
bathed
in the golden light of the setting sun, and it was here, in this space between the bustling metropolis and the
serene
countryside, that I felt a strange sense of peace, as though I had stumbled upon a hidden threshold, a place where
the
chaos of modern life met the timeless stillness of nature, and as I stood there, looking out at the horizon, I
felt a
deep sense of connection to everything around me, to the city behind me, with its countless lives and stories, and
to
the land before me, with its quiet beauty and ancient rhythms, and it occurred to me that perhaps the key to
finding
balance in life lies in these in-between spaces, these moments of transition where we can step back from the rush
and
noise of the world and simply be, without the need to do or achieve or prove anything, and as the sun dipped lower
in
the sky, casting long shadows across the hills, I turned and began the walk back into the city, my mind quieter
now, my
thoughts no longer racing, and as I re-entered the familiar streets, now bathed in the soft glow of twilight, I
felt a
renewed appreciation for the small moments, for the beauty that can be found in the everyday, if only we take the
time
to notice it, and I realized that while the city may seem overwhelming at times, with its constant movement and
endless
demands, it is also a place of infinite possibility, where every person, every street, every corner holds the
potential
for new discoveries, new connections, new stories waiting to be written, and as I continued my journey through the
city,
I found myself paying closer attention to the world around me, noticing the way the light danced on the surface of
the
river that cut through the heart of the city, the way the wind whispered through the leaves of the trees that
lined the
streets, the way the sounds of laughter and conversation echoed off the walls of busy cafes, blending together
into a
symphony of human experience, and I felt grateful to be a part of it, to be alive in this moment, in this place,
with
all its imperfections and challenges, because there is beauty in the struggle, in the impermanence, in the
knowledge
that nothing stays the same, that everything is constantly changing, and that we, too, are always growing,
learning,
evolving, and that perhaps the greatest adventure of all is not in seeking out some distant, unattainable goal,
but in
embracing the journey itself, in finding meaning and joy in the here and now, in the people we meet, the places we
go,
the experiences we have, and in the quiet moments of reflection that remind us of who we are and what truly
matters, and
as the night began to fall, and the city lights twinkled like stars against the deepening sky, I walked on, my
heart
full, my mind at peace, knowing that tomorrow would bring its own challenges, its own surprises, its own moments
of
beauty and grace, and that no matter where the road might lead, I would be ready to face it, with open eyes, an
open
heart, and a sense of wonder that, though perhaps diminished by the passing of time, still flickered within me,
like a
small but steady flame, reminding me that life, in all its complexity and uncertainty, is a gift, one that we
should
never take for granted, and as I made my way back to my home, the familiar streets now quiet in the stillness of
the
night, I couldn’t help but smile, grateful for the journey I had taken, both within the city and within myself,
and for
the knowledge that, no matter what the future holds, there is always beauty to be found, always something new to
discover, always a reason to keep moving forward, one step at a time.
</div>
<div class="image-container">
<img src="https://dummyimage.com/600x400/0000ff/fff" alt="office">
</div>
</div>
</body>
</html>删除您的
transformtopconst image = document.getElementsByTagName('img')[0];
const centerValue = image.height / 2;
image.style.top = `calc(50% - ${centerValue}px)`;
确保您使用此 JS 脚本选择真实图像。我刚刚在您的文档中选择了一张图像。