css position: fixed - set the center of the child in the center of the parent adaptively

Question

There is a button on the site that should always be visible. It shifts when scrolling (the js script replaces the new class when scrolling).

The problem is that I can’t adapt it in any way adaptive to the PARENT after this offset. I set the styles for the class being added when scrolling:

.scrolled { position: fixed; top: 0; left: 50%; }

and get offset from the left edge of the element. And you need to shift the element relative to its center.

The element is a button with a width of 186 px. Accordingly, it is necessary to position it somehow to the left by (50% of the width of the browser window - 93 px;). I do not see any other solutions yet.

Can this be done using css?

Tried a transform, but this property does not work for position: fixed;

In general, "we ourselves are not local, help than you can" :( Thank you!

Accepted Answer · 2018-10-23T11:26:48

We make the container on the entire width of the screen and position it at the bottom, and all the elements inside are aligned to the center.

Method 1: using text-align:center

Method 2: using flex-box

 #fixed { position: fixed; top: 0; left:0; right:0; display: block; text-align: center; background: #ddd; z-index: 9999; }

 <div id="fixed"> <a href="">ПО ЦЕНТРУ</a> </div>

 #fixed { position: fixed; top: 0; left:0; right:0; display: flex; justify-content: center; background: #ddd; z-index: 9999; }

 <div id="fixed"> <a href="">ПО ЦЕНТРУ</a> </div>

UPD: according to your task. For this code to work, you need to specify the width of the parent block.

 .container{ display:flex; } #contant{ width:200px; } #menu{ background:#ddd; } #menu a{ display:block; width:100px; } #fixed{ position:fixed; top:0; width: inherit; /*унаследовать ширину родителя. */ background: #ddd; text-align:center; }

 <div class='container'> <div id="contant"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tempora voluptas dolor temporibus, fugit sed nemo sit molestiae dolorem minima cumque libero vitae omnis voluptatum! Dignissimos fugiat, neque asperiores. Odio.</p> <div id='fixed'> <a href=''>ЦЕНТР</a> </div> </div> <div id='menu'> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">4</a> <a href="">5</a> <a href="">6</a> <a href="">7</a> <a href="">8</a> </div> </div>

I, apparently, inaccurately formulated the question. I attach a screenshot of the result.
On small screens, everything works fine (there the side menu is shifted down, so everything is OK).
Ie, apparently, it is necessary to align in the center relative to the immediate parent (I have this article block).
I will understand (to deepen their knowledge of Css at your leisure, and then self-taught).
There is no fixed width anywhere on the site, as far as I remember.
For greater adaptability :) Now decided the question differently - "hung up" the button when scrolling to the bottom right corner, since I could not position it.

css position: fixed - set the center of the child in the center of the parent adaptively

1 answer 1

More articles: