This question already has answers here:
Center a position:fixed element
(23 answers)
Closed 5 years ago.
I am trying to center image with position fixed in CSS. The code I tried
<style>
.bgimg {
top: 50%;
left: 50%;
position: fixed;
opacity:0.09;
marging: auto;
}
</style>
Refer to https://www.w3schools.com/code/tryit.asp?filename=FJZQPD9BZUBG
For variable width/height content, you'll want to use a percentage offset with a transform, like this:
.bgimg {
top: 50%;
left: 50%;
position: fixed;
opacity:0.09;
transform: translate(-50%, -50%);
}
Or, if you know the width and height, you can avoid using a transform and set all the positions to 0 paired with margin: auto;:
.bgimg {
width: 400px;
height: 400px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
You can see both methods in action, below!
.bgimg {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: .5;
}
/* you need to set the width and height on this one, otherwise it stretches it to fill */
.center-something-without-transform {
width: 50px;
height: 50px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: blue;
}
<img class="bgimg" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg" />
<div class="centered-without-transform"></div>
Related
This question already has answers here:
Why magin:auto is not enough to center position absolute or fixed?
(3 answers)
Center a position:fixed element
(23 answers)
Closed 2 years ago.
Here is the CSS:
#indicator {
position: fixed;
top: 40%;
width: 150px;
margin: 0 auto;
z-index: 1000;
padding: 2px;
background: #fff;
}
Whenever I apply it, the content stays hard left, not centered. I have tried it with block elements (such as P and H1), and inline elements (such as span).
When I check the HTML inspector I can see that the rules are being applied as expected, and none are being overridden.
By default, margin auto wont work with fixed elements. To make the margin auto value work with fixed elements, add left:0 and right:0 to your CSS values.
Attached a code snippet for your reference.
#indicator {
position: fixed;
top: 40%;
left: 0;
right: 0;
width: 150px;
margin: 0 auto;
z-index: 1000;
padding: 2px;
background: red;
}
<div id="indicator">
</div>
Because margin:auto only works with position:relative.
To make a fixed div to work with margin:auto, add left: 0; right:0; to your div.
#indicator_relative {
position: relative;
margin: 0 auto;
background: #0f0;
width: 10px;
height: 10px;
}
#indicator_fixed {
position: fixed;
margin: 0 auto;
background: #f00;
width: 10px;
height: 10px;
}
#indicator_fixed_centered {
position: fixed;
margin: 0 auto;
background: #00f;
width: 10px;
height: 10px;
left:0;
right:0;
}
<div id='indicator_fixed'></div>
<div id='indicator_relative'></div>
<div id='indicator_fixed_centered'></div>
To center fixed/absolute position elements. Add left: 50%; margin-left: (element width/ 2 * -1)px;
#indicator {
position: fixed;
top: 40%;
width: 150px;
margin: 0 auto;
z-index: 1000;
padding: 2px;
background: #fff;
left: 50%;
margin-left: -75px; /* (element width / 2 * -1) */
}
plus make sure that the parent element where you want to center this, has position: relative; so it wont just fly around.
top 40%; horizontal center;
#indicator {
position: fixed;
top: 40%;
left: 50%;
transform: translateX(-50%);
}
<div id="indicator">Hello World</div>
or center screen
#indicator {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="indicator">Hello World</div>
I want to center absolute position div that has max-width.
#confirmation-popup {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 500px;
height: 150px;
padding: 12px;
background-color: #4e4e4e;
}
This does not work in IE.
max-width doesn't work in IE. better use width or you can use translate technique.
here is the snippet:
#confirmation-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
max-width: 500px;
height: 150px;
padding: 12px;
background-color: #4e4e4e;
}
<div id="confirmation-popup">this is demo</div>
In order to translate an element completely out of view, I used transform: translate(0, -100%);. Its children however, if you resize the window compressing its height far enough, will gradually reappear. I have no clue why they do this, and I'd like someone to shed light on the reason why this happens. Here's the fiddle.
HTML
<body>
<div id="background">
<div id="circle1"></div>
<div id="circle2"></div>
</div>
</body>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#background {
background-color: red;
height: 100%;
width: 100%;
position: fixed;
transform: translate(0, -100%);
}
#circle1 {
background-color: yellow;
height: 500px;
width: 500px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
border-radius: 50%;
z-index: 0;
}
#circle2 {
background-color: aqua;
height: 400px;
width: 400px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
border-radius: 50%;
z-index: 1;
}
you have fixed heights for your cirecles (500px / 400px). When #background's height becomes less than that by resizing the window, the circles would overflow #background vertically.
The translatemovement by 100% refers to #background, so you still see the part of the circles that would overflow #background without the translate setting.
I'm trying to center an element with percent, but it don't work! Have I missed something or is the way I'm doing it impossible?
When I'm using this setting, the element is almost touching the top of the browser area.
.modal-box {
position: fixed;
z-index: 1000;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
}
Because everything is in %, you should just define width + height and top + left positions, not margin:
.modal-box {
height: 50%;
left: 25%;
position: fixed;
top: 25%;
width: 50%;
z-index: 1000;
}
JsFiddle: http://jsfiddle.net/ghorg12110/ob29nn2u/
html,
body {
width: 100%;
height: 100%;
}
.modal-box {
background-color: red;
height: 50%;
left: 25%;
position: fixed;
top: 25%;
width: 50%;
z-index: 1000;
}
<div class="modal-box"></div>
Instead of margins, use a transform. This will center the box regardless of height/width.
.modal-box {
position: fixed;
z-index: 1000;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
background: red;
transform: translate(-50%, -50%);
}
<div class="modal-box"></div>
If you want to center with percents, you will need to know the width of an element.
so say modal-box was 300px wide, you would do something like this:
.modal-box{
width:300px;
position:fixed;
left:50%;
margin-left: -150px; /*1/2 of your divs width*/
}
Why are you adding
margin-top: -25%;
margin-left: -25;
That negates the position: fixed of what you were trying to achieve. Remove those two lines and you will see how you can have your fixed position of the element.
If you want it relative to the viewport (irrespective of parent), then make use of the viewport-relative-lengths
.modal-box {
border: 1px solid #000;
position: fixed;
z-index: 1000;
width: 50vw; height: 50vh;
top: 50vh; left: 50vw;
margin-top: -25vh; margin-left: -25vw;
}
<div class="modal-box"></div>
I have an issue when im trying to make a picture resizable, i explain:
I have a div "overlay" that will fit the window;
Inside this div i have another div "imgActive" that will contain some pictures centered on the window;
Theses pictures inside has to fit the window no matter their size.
But, as you can see on this fiddle the picture inside fit horizontaly (the width change) but when you resize the window vertically, that doesn't resize at all (the height is still the same).
.overlay {
background: rgba(0, 0, 0, 0.7);
height:100%;
position: fixed;
width: 100%;
top: 0;
z-index: 999;
}
.imgActive {
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
z-index: 1000;
}
.imgActive img {
max-height: 100%;
max-width: 100%;
}
What can i do to make it works? To change the height ?
Thanks for your time.
You can use css directly on img. This method maintains the Aspect Ratio of the Picture
Demo
http://jsfiddle.net/ykf6b5ot/
CSS (adjust the min and max % to suit the image size you like)
img {
max-width:70%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Or you can use a single class
HTML
<div class="overlay">
<img class="image" src="https://pbs.twimg.com/profile_images/471998783933251584/IF367cAS.jpeg" alt="" />
</div>
CSS
.image {
max-width:50%;
max-height: 50%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Demo
http://jsfiddle.net/1w9s9wx7/
For the wrapper imgActive you do exactly the same as the image CSS and adjust the height/width % you like. 100% is full screen
CSS
.imgActive {
-webkit-transform: translate3d(0px, 0px, 0px);
height: 50%;
width: 50%;
z-index: 1000;
border:1px solid red;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Demo
http://jsfiddle.net/z69t00ns/