I would like to center different images which are shown and hidden, depending on how the user clicks.
What I did to center an image was:
img {
margin-left: auto;
margin-right: auto;
display: block;
}
which worked fine. But it does not work for a position: absolute; Is there a css only way to center a position: absolute div horizontally in the middle of body or parent without knowing the width?
For absolutely positioned element, you can set the margin:auto in combination with left:0 and right:0 (for horizontally centered) or top:0 and bottom:0 (for vertically centered):
img {
position:absolute;
left:0;
right:0;
margin:auto;
}
Demo.
Give the element position: absolute and position it 50% from the left edge of the screen, then use transform: translate to move it 50% of its width to the left.
Demo:
HTML:
<div class="center"></div>
CSS:
.center {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
Here's a pen with this.
Here's the browser support for 2d transforms, and information about which vendor prefixes you need.
You can also use transform: translate3d to center elements vertically with the same logic. The CSS would then look like this:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
The only way i know is using an additional div, like this:
http://jsfiddle.net/tTAG5/1/
HTML:
<div class="target">
<div class="wrapper"></div>
</div>
CSS:
.wrapper{
width:100px;
height:100px;
background:blue;
margin:0 auto;
margin-left:-50%;
}
.target{
position:absolute;
left:50%;
}
What this does is:
set left:50% on your main div
add your divs contents in another wrapper div element like shown in demo above
set margin-left:-50% on the wrapper div
You can use:
padding-left: 50%;
margin-left: -(half the width of your image)px
It's not the cleanest solution it's probably not the right scenario for absolute positioning.
Related
I am trying to have a child div be centered horizontally (left/right) within the parent div and also fixed to the top of the parent div but I cant figure out how to do this in CSS :-( I can center it and I can fix it but anytime I try to combine the child div just gets fixed in its natural place (to the left).
EDIT: Child needs to be fixed to the top so when other children overflow they can be scrolled but it would stay in place.
Use flexbox - there's a reason why the major difference between Bootstrap3 and Bootstrap4 is switching from floats to flexbox!
Example:
#parent{height:100px;background:red;}
#parent{display:flex;align-items:flex-start;justify-content:center;}
#child{background:yellow;}
XXX#child{flex-grow:1;text-align:center;} /* Uncomment if you want row to be full-width */
<div id="parent">
<div id="child">
Here is some text
</div>
</div>
References:
Excellent flexbox cheatsheet
Excellenter short Video Tutorial
.parent{
position: relative; // This is important
}
.child{
position: absolute;
top:0;
left: 50%;
transform: translateX(-50%);
}
Try out following code
<div class="container">
<div class="child"></div>
</div>
css is here
.container {
width: 100%;
background-color: orangered;
height: 200px;
position: relative;
}
.child{
width: 200px;
height: 100px;
background-color: brown;
position: fixed;
left: 50%;
right: 50%;
transform: translateX(-50%);
}
It looks like this was the solution:
.child{
position: fixed;
left: 50%;
transform: translateX(-50%);
}
thank you #Prithwee Das for the transform hint.
I am trying to figure out how to solve the following problem with CSS:
I have a container, say it's a div. It should be always visible on my page, vertically and horizontally centered.
The container should not have a fixed size, but a fixed proportion (or aspect ratio), say: "width = 1/3 of height".
Moreover, the container should be always visible as huge as possible. (Meaning either "touch" the upper and lower OR the left and right borders of the browser window, depending on the current window size)
This is how I proceeded so far:
relevant html:
<body>
<div>Text</div>
</body>
css:
body {
margin: 0px;
}
div {
position: absolute;
background-color: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This of course only centers the div. The cucial part is the sizing, that I described above. Would this be possible with css?
You can set min-height: 100vh so element will always be full height and width: calc(100vh/3); so width is 1/3 of window height
Demo
body {
margin: 0px;
}
div {
position: absolute;
background-color: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100vh;
width: calc(100vh/3);
}
<div>Text</div>
This is a version of the responsive video solution. You'll need to wrap the element you want to keep the ratio for in a container.
#container{
position:relative;
padding-top:33%;
width:100%;
}
#container div{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
}
Padding (and margin) percentages are based on the width of the element. So, if the width is 100%, the height in the above code will be 1/3 of the width (33%).
I'm trying to get two images on top of each other, while also being centered both vertically and horizontally on screen. If I make them both positioned relatively, the first one is centered great, while the second one appears beneath the first.
#copy, #logo {
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: auto;
margin-right: auto;
}
So I added a wrapper and positioned that relatively and positioned the images absolutely. Now they stack on one another, but I lost my centering.
#wrapper {
position: relative;
top: 50%;
transform: tranlasteY(-50%);
margin-left: auto;
margin-right: auto;
}
#copy, #logo {
position: absolute;
}
You got to make html, body, the #wrapper and all the parent elements for the images to occupy all the screen, with height:100%. Set the positioning of the images absolute based on #wrapper with position:relative on it. And voilá, set the XY positioning margin to 50% (as you did) and translate(-50%) (as you did).
body,html{
padding:0;
height:100%;
}
#wrapper {
position: relative;
height:100%;
}
#copy, #logo {
opacity: 1;
position: absolute;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
}
Pen
Obs: Great images btw
You can omit the wrapper and just use absolute positioning on the children elements, setting the margin to auto and the top/right/bottom/left to 0:
#copy, #logo {
opacity: 1;
position: absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
}
<div id="wrapper">
<img id="copy" class="img-responsive" src="http://fillmurray.com/600/600"></img>
<img id="logo" class="img-responsive" src="http://fillmurray.com/500/500"></img>
</div>
I have a div with these properties:
.tourcontainer {
position:fixed;
top:0px;
padding:200px;
z-index:20;
color:white;
}
I have the challenge, that the content of the div is fluid, so i don't know how to make it vertical align regardless of the height of the div.
.div{
position: relative;
top: 50%;
transform: translateY(-50%);
}
I'm trying to float a fixed position div tag in the centre of my browser and have it stay centred even when the browser is resized. I can get it centred but it moves to the left when the browser is resized because of the margins used to get it centred.
Is there a CSS trick I can use to make the margin-top & margin-left dynamic? I would also like to have the width of the container set to 90%.
#conntainer {
position:fixed;
width: 17028px; /* would like this to be width: 90%; */
height: 798px;
top: 50%;
left: 50%;
margin-top: -145px;
margin-left: -864px;
z-index: 100;
}
Use this instead:
#conntainer {
position:fixed;
width: 90%;
height: 798px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
z-index: 100;
}
jsFiddle example
Use CSS transform instead.
#conntainer {
position:fixed;
width: 90%;
height: 798px;
top: 50%;
left: 50%;
z-index: 100;
transform: translate(-50%, -50%);
}
See proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/vbdCz/
The advantage of this method is that it also centers dynamic heights property... although it appears from your example that you'll be sticking to a fixed height anyway :) (in that case, using auto left/right margins without transform is sufficient).
p/s: You might want to add vendor prefixes (just -webkit-, actually) to the CSS transform property.