I want to center a div on top of a bootstrap grid and have it remain centered with the responsive layout (regardless of screen size). Here is a bootply of what I'm trying to do. How can I center the .ontop div on the grid?
Oops should have poked around more. I found this works pretty well:
width: 80%;
height: 80%;
left: 50%;
top: 25%;
margin-left: -40%;
margin-right: -40%;
You have to apply the following:
.container .ontop {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
The top/left properties move the element by 50% of the width of the parrent element horizontally/vertically. The transform: translate() moves the element back by half of its width/height.
Related
When I am using this css to make an element center into a container then everything is ok except ie-11. In ie-11 a horizontal scroll apper bottom of the page. When i remove width:100% from this css then scroll remove but i need this width. you can see the problem in this page http://www.azayabeachresortgoa.com/wellness/
.box_center {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
z-index: 100;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-sizing: border-box;
width: 100%;
}
You can actually remove a lot of that stuff and end up with similar positioning, see
If you don't want to revisit that (I suggest you do), you can simply add:
body { overflow-x: hidden; }
Or add an overflow: hidden to one of the .box_center's closer relatives.
why does centering with transform translate and left 50% center perfectly (with position relative parent) but not right 50%?
Working example:
span[class^="icon"] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Example that doesn't center:
span[class^="icon"] {
position: absolute;
top: 50%;
right: 50%;
transform: translate(-50%, -50%);
}
Because translateX(-50%) moves something back to the left 50% (because of the - negative value), which means it pairs with left: 50%; to center something.
If you want to use right: 50%; then use that with translateX(50%) to center.
* {margin:0;}
span {
position: absolute;
top: 50%; right: 50%;
transform: translate(50%,-50%);
background: black;
color: white;
}
body:after, body:before {
content: '';
position: absolute;
background: red;
}
body:after {
top: 50%;
left: 0; right: 0;
height: 1px;
}
body:before {
left: 50%;
top: 0; bottom: 0;
width: 1px;
}
<span>center me</span>
From what I understand, top: and left: actually mean how far the object's top edge is from the top of its container (container refers to the closest parent element with a relative position) and how far the object's left edge is from the left of its container. Specifically, top: 50% means that the object is shifted by 50% of the container's height and left: 50% means the object is shifted 50% of the container's width.
Once the origin of the element is at the center, you can see that by shifting the element to the left by half of its width and up by half of its height, the center of the object will be at the origin rather than its upper left corner.
If we did right: 50% instead, then the right side of the element would be shifted from the right side of the container by 50% of the container's width, meaning that its upper-right edge is on the origin. Therefore, by shifting it to the right by 50% of its width and up by 50% of its height (transform(50%, -50%)), we will center the object.
I have been working in a pop up. It's centered vertically and horizontally in the main div. I have used the following code:
CSS
#pop-up {
background-color: #FFF;
display: none;
height: auto;
left: 50%;
margin: 0 auto;
position: fixed;
top: 50%;
width: 420px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
But everytime I hover the DIV, it get pixelated. I have been reading about it and it's a Google Chrome's bug. I have tried different solutions but it didn't help me out. So, can you help me to fix it?
I'm trying to create several images on a page that are the same size, and I'd like to crop and center the source images without resizing them. I've found several answers that do what I need (like here), but they all seem to use background-image. My images, though, are made so that they are black and white and change to color when hovered over, so they are their own class and I can't use the background-image solutions.
Hope that makes sense, it's pretty late. Please let me know if there's any way to do the centering/cropping without background-image, or alternatively have the b/w->color effect on a background-image. Thanks!
If using CSS transforms is an option, it can be done even if the dimensions of the images are unknown.
They key point is that a percentage value on translate() notation is relative to the size of bounding box, while a percentage value on top/left properties refers to the size of the box's containing block.
.center-cropped {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
border: 1px solid black;
margin: 0 auto;
}
.center-cropped img {
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="center-cropped">
<img src="http://placehold.it/200x200" alt="" />
</div>
It's worth noting that CSS transforms are supported in IE9+.
If your image is 200px 200px
div { position:relative; } //parent container
img {
position: absolute;
top: 50%;
left: 50%;
margin-left:-100px;
margin-top:-100px;
}
I've used the following css to centre a div on screen (no fixed width or height so can't use defined pixel width and height and negative margins).
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
I've just realised that when you have saved your details for a form in Firefox, and then try to fill in the form within my div, the pop-up Firefox creates that contains your saved details is ignoring the transform, and appearing in the location on screen where the entire div would be if transform: translate wasn't applied.
It's difficult to give an example of this because it requires you to have saved your login details to a site, but if you go to a site where you have saved details, and move the container using transform: translate, you'll see the effect.
Is there a way of forcing Firefox's pop-up to take on the transform? Or will I need to find a different way of centring my div onscreen?
Your CSS should be right, but the position should be fixed on your parent div
w3schools: position: absolute The element is positioned relative to its first positioned (not static) ancestor element
.parent{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.child{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="parent">
<div class="child"></div>
</div>
What kind of browser support do you need? you can solve this with flexbox!
body (or container-div) {
display: flex;
align-items: center;
justify-content: center;
}
Try this to center div on a page. It is a more elegant approach.
.center{
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
height:some-height;
width:some-width;
}