Position element perfectly to center (not just for fullscreen) - javascript

So, I need to position my element perfectly to the center. It displays correctly in fullscreen mode, however when it's not in fullscreen mode, the element is moved slightly down due to the top of the browser (tabs, URL bar, etc..)
I am using this CSS:
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I have a feeling it's centered relative to the screen resolution? (Which explains why it's centered perfectly to fullscreen).
Here are images of what I mean:
https://i.stack.imgur.com/f63l7.jpg
https://i.stack.imgur.com/xwNfs.png
Is there any way to fix this? I don't mind using HTML/CSS/JS to solve this issue, I can also use JavaScript libraries.
Thanks for any help!
Edit:
My element is inside the body, like this:
<body>
<img class="centered" src="image.png">
</body>

Make use of the vh unit by changing your code like so:
.centered {
position: absolute;
top: 50vh;
left: 50%;
transform: translate(-50%, -50%);
}

You need to set parent to position: relative.
.parent {
position: relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="parent">
<span class="centered">I am centered</span>
</div>

Related

Hover Popup does not move when parent node scroll left

there. I was trying to make a hover popup. When my mouse hovers over a table header, a detail explanation will pop up.
However, when I scroll left the table, the popup stays. Is there any way that I can make it stick with the header?
Jsfiddle Link:
https://jsfiddle.net/fmchen/hmaczn87/10/
Some Screenshots:
When scroll left:
I know that I can change the position: absolute; to position: relative; in .CellComment1
However, it will be looking like this:
I added the position: relative; to the field_29 class, then position: absolute; to the span and it worked properly. If you want to be in 1 row then add the span a width: max-content; and for the center align add a margin-left: 50%; and transform: translateX(-50%);
.field_29:hover span.CellComment{ display: block; position: absolute; width: max-content; margin-left: 50%; transform: translateX(-50%); }
.field_29 { position: relative; }

How to zoom on the center of an image?

I want to know how to zoom on the center of an image.
I tried different things like imageWrapper.width().left
$(document).on('click', '.process-diagram-zoom-in', function(){
var div = $(this).parents('.container-fluid:first');
var imageWrapper = div.find('.image-wrapper');
imageWrapper.width(imageWrapper.width() * 5.1);
});
Apparently, you already know how to magnify the image, so what you need to do is make sure it's centered inside a container.
This can be done with simple CSS.
For the container:
position: relative;
And for the image:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

How to get an Image in the foreground with Bootstrap?

I'm trying to set a loading-GIF in the foreground of the users screen during an Ajax-request. The Gif should be in the middle of the webpage also if the user scrolls down or up. Is there a layout method in Bootstrap to realize this?
I'm not sure where to place this HTML snippet
<div id='loading' style='display: none'>
<img src="fonts/loading.gif" title="Loading" class="img-responsive center-block"/>
</div>
You can do it with CSS. Create an overlay wich will cover the page (overlay) by setting the z-index to 9999 to make sure it's at the foreground. To actually set the spinner in the center of the screen you can use top and translate properties. For example:
CSS:
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.loading-overlay > .inner
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The HTML markup looks like this:
<div class="loading-overlay"><div class="inner"><img src="fonts/loading.gif" title="Loading" class="img-responsive center-block"/></div></div>
To add a transculent background to the overlay, simply add background: rgba(0,0,0,0.85); to the .loading-overlay class.
Good luck!
You can place it anywhere but you would need to style the div using CSS to keep it in the middle of the page
This should work for you:
#loading{
position: fixed;
top: 50%;
left: 50%;
}

How to center a scrollable image that is larger than the screen

I'd like to make an image viewer that centers an image regardless of how big it is and allows scrolling to view the entire image.
The problem I'm running into is that, while centering images smaller than the container is easy, when they're larger tranform I'm doing positions the image off the right and top of the screen.
Here is the fiddle that has some fixup javascript to make it work: http://jsfiddle.net/d3y0b8bd/
The code below will work for smaller images (e.g. https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png)
But for larger, the translate(-50%, -50%) transform will translate the image past the left and top margins of its parent.
.lightboxRoot {
position: fixed;
width: 100%;
height: 100%;
overflow: auto;
/*aesthetic*/
background-color: red;
}
.lightboxImg {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
/*aesthetic*/
background-color: blue;
}
html:
<div class="lightboxRoot">
<div class="lightboxImg">
<img id="imgElt" src="http://upload.wikimedia.org/wikipedia/commons/6/65/Cute_beagle_puppy_lilly.jpg"></img>
</div>
</div>
here's a fiddle in which JS is updating the position of scrollTop and scrollLeft, so to set the scroll to center of img.
Figured it out, in retrospect kind of silly: Just make a containing div that can't get any larger than the parent element, and make sure that it has the overflow property set so it gets the scrollbars. then the image inside can get is big as it wants: http://jsfiddle.net/abrady0/d3y0b8bd/2/
.lightboxRoot {
position: fixed;
width: 100%;
height: 100%;
/*aesthetic*/
background-color: red;
}
.lightboxContainer {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
overflow: auto;
/*aesthetic*/
background-color: blue;
}
and the html:
<div class="lightboxRoot">
<div class="lightboxContainer">
<div>
<img id="imgElt" src="foo"></img>
</div>
</div>
</div>
one thing to fix in this case is that I'd still like the div's scroll centered with pure CSS, but this is a good first step.

center a div (absolute position and width)

i use below css to center my div with absolute position:
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width: 121px;
height: 121px;
margin-top: -60.5px; /*set to a negative number 1/2 of your height*/
margin-left: -60.5px; /*set to a negative number 1/2 of your width*/
}
It works like magic.
But as you can notice, it has fixed width and height.
Now i have to use this same css but for my div which has no fixed width and height, as it uses responsive layouts.
I just want to know is there any simplest way to set my div width dynamically in css by javascript or so? i.e., it count my div width on page load and than set to a negative number 1/2 of your it in margin-left?
You can center a fixed or absolute positioned element setting right and left to 0, and then margin-left & margin-right to auto as if you were centering a static positioned element.
#example {
position: absolute;
/* center the element */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
/* give it dimensions */
min-height: 10em;
width: 90%;
}
See this example working on this fiddle.
use to
display table-cell
as like this
Css
.parent{
display:table-cell;
width:400px;
text-align:center;
border:solid 1px red;
vertical-align:middle;
height:400px;
}
.child{
display:inline-block;
background:green;
}
HTML
<div class="parent">
<div class="child">i m child div</div>
</div>
Demo
I also had this problem trying to center captions of varying lengths in a slideshow.
To center an absolute positioned element that has a dynamic width you can use transform: translateX. With prefixes this works in most modern browsers. Like so:
div {
width: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%); }
Assign a class to all the divs that you want positioned like that, and then just select all of them and do the calculations.
$("body").find(".center").each(function() {
$(this).css({
"margin-left": "-" + ( $(this).width()/2 ) + "px",
"margin-top": "-" + ( $(this).height()/2 ) + "px"
});
});
Though, beware that this is a bad way of doing things, mainly because it's slow, your containers are not flexible and if you don't wait for the centering you may have flashes of unformatted content.

Categories