I have 3 divs on top of each other having following css.
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: absolute;
left: 83px;
}
and the divs that have classes are as follows:
<div class="d1">
<div class="d2">
<div class="d3">text</div>
</div>
</div>
and as a result I see content of d3 cut off because of overflow:hidden in d1.
How can I avoid cut off content of d3 without modifying d1?
Getting around the overflow..
An element can overflow from a relative or absolute positioned parent by setting its position to fixed. An element that has position: fixed will have the default left,right,top, and bottom styles set as auto. This will position .d3 to the top-left of .d2, and then the left: 83px style will push it to the left from there.
Making up the additional space..
However, to get that additional movement to the right as the original markup, you will need to add margin-left: 8px, which will make-up the additional ~8px needed to replicate the original. Further adjustments to the position of .d3 will need to be done by setting the margin style (see below).
Your updated code should look like this..
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: fixed;
margin-left: 8px;
left: 83px;
}
Some considerations and caveats..
As a previous commenter mentioned, best practice would be to fix your html markup because this solution could cause issues if you ever need to move the position of .d3. For example, setting left,right,top, or bottom will cause the default setting of this style, auto, from being unset, and the element will be positioned relative to the viewport rather than the parent relative or absolute element.
What's the proper way to position an HTML element according to a center handle?
In this example:
XXXXXXXXX
|
|
123px
Assume the element should be position at absolute position left: 123px; but the text should be centered at that point, not start at it. The element text is dynamic, so I have no way of setting a static negative margin-left on it.
Is there a pure CSS way to achieve this? The JS way of measuring offsetWidth and then setting left after calculating width / 2 won't neccesarily work in my case due to various limitations.
One posibility is to set a transform translateX -50%
p {
position: relative;
display: inline-block;
left: 100px;
transform: translateX(-50%);
}
<p>ONE</p>
<br>
<p>TWO, LONGER</p>
<br>
<p>THREE, the longest</p>
It's fairly easy to achieve that and there are several ways to do it. Since you didn't post any HTML construct for your example, I'll just make up some.
The trick is to have an inline-block parent element which has the desired offset (123px) and inside that element you'll have another inline-block element with a left margin of -50%. Position both relative and you'll have the effect you are looking for.
#container {
position: relative;
}
#line {
width: 100px;
height: 100px;
left: 123px;
position: absolute;
border-left: 1px solid red;
}
#text {
left: 123px;
top: 50px;
display: inline-block;
position: relative;
}
#text p {
position: relative;
background: green;
margin-left: -50%;
display: inline-block;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
<div id="container">
<div id="line">
<-- 123px
</div>
<div id="text">
<p>
This is some dynamic text<br>the div has no absolute set width.
</p>
</div></div>
There are other ways as mentioned, probably depends on your general layout/HTML structure. I would definitely take a look at the flex-box properties, this might also be suitable here.
If you want to play around with it, here's a fiddle.
Some of various ways to do this with css:
If your element is a block:
.element{
width: 200px; /* Full width */
left: 50%;
margin-left: -100px; /* Half width */
position: absolute;
display: block;
}
or, if you're using css3:
.element{
width: 200px; /* Full width */
left: calc(50% - 100px);
position: absolute;
display: block;
}
You can also have a non-absolute approach, but the parent element position should be relative:
.element-parent{
position: relative;
}
.element-parent .element{
margin: 0 auto;
}
If you use text-oriented element (inline-block), this works with IE 7+:
.element-parent{
text-align: center;
}
.element-parent .element{
display: inline-block;
}
I've got a fixed container which is vertically and horizontally centred on the page, and an element within that container. Ideally I would like to have this element positioned in the very top left of the window, however I'm struggling to make it work.
This JS Bin illustrates the problem.
https://jsbin.com/nodonatifo/edit?html,css,output
Initially I thought I would just be able to do something like this on the element.
#container {
width: 300px;
height: 400px;
background-color: #55ffdd;
/* Center on page */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#element-actual {
background-color: red;
width: 100px;
height: 100px;
position: fixed;
top: 0px;
left: 0px;
}
<div id="container">
<div id="element-actual"></div>
</div>
However that just fixes the element in the top left corner of the parent container, rather than the window.
Is this possible with my current styles?
#container {
width: 300px;
height: 400px;
position: fixed;
top: 50%;
left: 50%;
background-color: #55ffdd;
margin-top: -200px;
margin-left: -150px;
}
If you use translate property then its children div will place relatively to the parent div only even when it is position:fixed so you can use the above code to place #container in center and you red div will be placed relatively to the window not the parent div :)
As Gaurav Aggarwal already pointed out, the fixed element will still be relative to the parent's transformed positioning. If you want the container element to be dynamically positioned (even if it has unknown dimensions), then you could use the following approach and avoid using transform: translate(-50%, -50%) for vertical/horizontal centering.
This method essentially positions the container element to fill the height/width of the window element with top: 0/right: 0/bottom: 0/left: 0, and then centers it vertically/horizontally using margin: auto.
Example Here
#container {
width: 300px;
height: 400px;
position: fixed;
top: 0; right: 0;
bottom: 0; left: 0;
margin: auto;
background-color: #55ffdd;
}
#element-actual {
background-color: red;
width: 100px;
height: 100px;
position: fixed;
top: 0;
left: 0;
}
<div id="container">
<div id="element-actual"></div>
</div>
Easy, add this to the child:
position: sticky;
I have a div with some text on my page, and I want it to be at the bottom. I did this using fixed positioning:
div#popup{
position: fixed;
bottom: 0;
But I also want it to be centered. I tried giving it a width of 40% and auto margins, but that doesn't work (it doesn't work with the combination of the above code) :
div#popup{
position: fixed;
bottom: 0;
width: 40%;
margin-left: auto;
margin- right: auto;
How can I achieve this?
Thanks.
If you know width of div you can use negative margin-left for horizontal position (which equals half of width).
div {
position: fixed;
bottom: 0;
left: 50%;
width: 40%;
height: 30px;
margin-left: -20%;
background: blue;
}
JSFiddle
If you don't know width, just use wrapper and inline-blocks:
HTML:
<section>
<div>la-la-la</div>
</section>
CSS:
section {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
div {
display: inline-block;
border: 1px solid red;
color: red;
}
JSFiddle
I encourage You to check two nice tutorials (quick read):
http://www.barelyfitz.com/screencast/html-training/css/positioning
http://learnlayout.com/position.html
I think You need to describe position like this:
div#popup{
position: fixed;
bottom: 0;
right: 50%;
}
First off, you should never use fixed positioning to get your footer to stick to the bottom. To get the footer to stick to the bottom of the screen, set all your divs to relative, then add an extra div the same height as the footer (set a height for your footer) between the content and the footer. Then put a margin of negative that height on your content div. Works perfectly.
To centre it, use width auto and margin left and right auto or just use text-align center
I'm having a problem centering an element that has the attribute position set to absolute.
Does anyone know why the images are not centered?
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align: center;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: absolute;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 450px;
}
<body>
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="https://source.unsplash.com/random/300*300?technology" alt="Dummy 1" /></li>
<li><img src="https://source.unsplash.com/random/301*301?technology" alt="Dummy 2" /></li>
</ul>
</div>
</body>
If you have set a width you may use:
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
Without knowing the width/height of the positioned1 element, it is still possible to align it as follows:
EXAMPLE HERE
.child {
position: absolute;
top: 50%; /* position the top edge of the element at the middle of the parent */
left: 50%; /* position the left edge of the element at the middle of the parent */
transform: translate(-50%, -50%); /* This is a shorthand of
translateX(-50%) and translateY(-50%) */
}
It's worth noting that CSS Transform is supported in IE9 and above. (Vendor prefixes omitted for brevity)
Explanation
Adding top/left of 50% moves the top/left margin edge of the element to the middle of the parent, and translate() function with the (negative) value of -50% moves the element by the half of its size. Hence the element will be positioned at the middle.
This is because a percentage value on top/left properties is relative to the height/width of the parent element (which is creating a containing block).
While a percentage value on translate() transform function is relative to width/height of the element itself (Actually it refers to the size of bounding box).
For unidirectional alignment, go with translateX(-50%) or translateY(-50%) instead.
1. An element with a position other than static. I.e. relative, absolute, fixed values.
Centering something absolutely positioned is rather convoluted in CSS.
ul#slideshow li {
position: absolute;
left:50%;
margin-left:-20px;
}
Change margin-left to (negative) half the width of the element you are trying to center.
Div vertically and horizontally aligned center
top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;
Note : Elements should have width and height to be set
If you want to center an absolute element
#div {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
If you want a container to be centered left to right, but not with top to bottom
#div {
position:absolute;
left:0;
right:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
If you want a container to be centered top to bottom, regardless of being left to right
#div {
position:absolute;
top:0;
bottom:0;
width:300px; /* Assign a value */
height:500px; /* Assign a value */
margin:auto;
}
Update as of December 15, 2015
Well I learnt this another new trick few months ago. Assuming that you have a relative parent element.
Here goes your absolute element.
.absolute-element {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:50%; /* You can specify ANY width values here */
}
With this, I think it's a better answer than my old solution. Since you don't have to specify width AND height. This one it adapts the content of the element itself.
Update as of April 23, 2021
It does not answer to OP's question about position absolute, but if you want alternative solution, there's this called flexbox. Here's an example.
#parent {
display:flex;
align-items:center;
justify-content:center;
}
What it does is the container is converted to flex and to align child items to center on horizontal is by using justify-content:center and vertical is to use align-items:center. It does support modern browsers too, so it's safe to use.
Though, be sure to read how flexbox work first.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Flexbox supported browsers
https://caniuse.com/flexbox
A simple CSS trick, just add:
width: 100%;
text-align: center;
This works on both images and text.
This worked for me:
position: absolute;
left: 50%;
transform: translateX(-50%);
To center a “position: absolute” element.
.your-element {
position: absolute;
left: 0;
right: 0;
text-align: center; // or this -> margin: 0 auto;
}
to center a a position:absolute attribute you need to set left:50% and margin-left: -50% of the width of the div.
<!-- for horizontal -->
<style>
div.center{
width:200px;
left:50%;
margin-left:-100px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered horizontaly
</div>
</body>
for vertical center absolute you need to do the same thing bud not with left just with top.
( NOTE: html and body must have min-height 100%; )
<!-- for vertical -->
<style>
body,html{
min-height:100%;
}
div.center{
height:200px;
top:50%;
margin-top:-100px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered verticaly
</div>
</body>
and can be combined for both
<!-- for both -->
<style>
body,html{
min-height:100%;
}
div.center{
width:200px;
height:50px
left:50%;
top:50%;
margin-left:-100px;
margin-top:-25px;
position:absolute;
}
</style>
<body>
<div class='center'>
should be centered
</div>
</body>
Or you can now use flex box with postion absolute:
.parent {
position: relative;
display: flex;
justify-content: center;
}
.child {
position: absolute;
}
<div class="centered_content"> content </div>
<style type="text/css">
.centered_content {
text-align: center;
position: absolute;
left: 0;
right: 0;
}
</style>
see demo on: http://jsfiddle.net/MohammadDayeh/HrZLC/
text-align: center; works with a position: absolute element when adding left: 0; right: 0;
You can use the "transform" attribute:
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
The simpler, the best:
img {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto auto;
position: absolute;
}
Then you need to insert your img tag into a tag that sports position:relative property, as follows:
<div style="width:256px; height: 256px; position:relative;">
<img src="photo.jpg"/>
</div>
If you don't know the width of the element you can use this code:
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
Demo at fiddle: http://jsfiddle.net/wrh7a21r/
Source: https://stackoverflow.com/a/1777282/1136132
probably the shortest
position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;
as many others said this ⬇️
.element {
position: absolute;
left: 0;
top: 0;
transform: translate(-50%, -50%);
}
should work. But be aware, that the .element must be in a wrapper that has position: relative; (in case you don't want to make it in the center of the whole HTML page)
FYI: I've made a pseudo-library for CSS centering. I needed it for my dev juniors. So, feel free to check it out. http://dev.solcode.net/centercss/
Using
left: calc(50% - Wpx/2); where W is the width of the element works for me.
I'm not sure what you want to accomplish, but in this case just adding width: 100%; to your ul#slideshow li will do the trick.
Explanation
The img tags are inline-block elements. This means that they flow inline like text, but also have a width and height like block elements. In your css there are two text-align: center; rules applied to the <body> and to the #slideshowWrapper (which is redundant btw) this makes all inline and inline-block child elements to be centered in their closest block elements, in your code these are li tags. All block elements have width: 100% if they are the static flow (position: static;), which is default. The problem is that when you tell li tags to be position: absolute;, you take them out of normal static flow, and this causes them to shrink their size to just fit their inner content, in other words they kind of "lose" their width: 100% property.
Your images are not centered because your list items are not centered; only their text is centered. You can achieve the positioning you want by either centering the entire list or centering the images within the list.
A revised version of your code can be found at the bottom. In my revision I center both the list and the images within it.
The truth is you cannot center an element that has a position set to absolute.
But this behavior can be imitated!
Note: These instructions will work with any DOM block element, not just img.
Surround your image with a div or other tag (in your case a li).
<div class="absolute-div">
<img alt="my-image" src="#">
</div>
Note: The names given to these elements are not special.
Alter your css or scss to give the div absolute positioning and your image centered.
.absolute-div {
position: absolute;
width: 100%;
// Range to be centered over.
// If this element's parent is the body then 100% = the window's width
// Note: You can apply additional top/bottom and left/right attributes
// i.e. - top: 200px; left: 200px;
// Test for desired positioning.
}
.absolute-div img {
width: 500px;
// Note: Setting a width is crucial for margin: auto to work.
margin: 0 auto;
}
And there you have it! Your img should be centered!
Your code:
Try this out:
body
{
text-align : center;
}
#slideshow
{
list-style : none;
width : 800px;
// alter to taste
margin : 50px auto 0;
}
#slideshow li
{
position : absolute;
}
#slideshow img
{
border : 1px solid #CCC;
padding : 4px;
height : 500px;
width : auto;
// This sets the width relative to your set height.
// Setting a width is required for the margin auto attribute below.
margin : 0 auto;
}
<ul id="slideshow">
<li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
<li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>
I hope this was helpful. Good luck!
An absolute object inside a relative object is relative to its parent, the problem here is that you need a static width for the container #slideshowWrapper , and the rest of the solution is like the other users says
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align:center;
width: 500px;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
}
ul#slideshow li {
position: relative;
left: 50%;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 450px;
}
http://jsfiddle.net/ejRTU/10/
Here is easy and best solution for center element with “position: absolute”
body,html{
min-height:100%;
}
div.center{
width:200px;
left:50%;
margin-left:-100px;/*this is 50% value for width of the element*/
position:absolute;
background:#ddd;
border:1px solid #999;
height:100px;
text-align:center
}
<style>
</style>
<body>
<div class='center'>
should be centered verticaly
</div>
</body>
Just use display: flex and justify-content: center on the parent element
body {
text-align: center;
}
#slideshowWrapper {
margin-top: 50px;
text-align: center;
}
ul#slideshow {
list-style: none;
position: relative;
margin: auto;
display: flex;
justify-content: center;
}
ul#slideshow li {
position: absolute;
}
ul#slideshow li img {
border: 1px solid #ccc;
padding: 4px;
height: 100px;
}
<body>
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="https://source.unsplash.com/random/300*300?technology" alt="Dummy 1" /></li>
<li><img src="https://source.unsplash.com/random/301*301?technology" alt="Dummy 2" /></li>
</ul>
</div>
</body>
<!-- Images from Unsplash-->
You can find this solution in JSFIDDLE
You can try this way :
* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative;
text-align: center;
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg');
background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px;
display: inline-block; margin: auto; z-index: 999999; }
<html>
<body>
<div id="body" class="container-fluid">
<!--Background-->
<!--Text-->
<div class="text">
<p>Random</p>
</div>
</div>
</body>
</html>
1- when you know the width of the absolutely positioned element.
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px
2- when you don’t know the width of the absolutely positioned element. Excellent for responsiveness but is CSS3 older browsers may have an issue.
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
3- when you don’t know the width of the absolutely positioned element but makes it 100% wide of it’s parent which might not fit the design.
position: absolute;
left: 0;
right: 0;
margin: auto
If you do know the width, you can use the third option as well and it will center.
My favorite method to absolute center any element or group of elements is to absolute position their container, make it the height and width of the relative container, then use flex to align the elements within.
In this specific case:
body {
position: relative; /* OPTIONAL */
}
#slideshowWrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: row; /* OPTIONAL IF ONLY ONE ELEMENT */
justify-content: center;
align-items: center;
}
Hope that helps, cheers.
For this case, I think the code as below is enough:
ul#slideshow li {
position: absolute;
left: 0;
right: 0;
}
#parent
{
position : relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25% /* images with aspect ratio: 16:9 */
}
img
{
height: auto!important;
width: auto!important;
min-height: 100%;
min-width: 100%;
position: absolute;
display: block;
/* */
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
I don't remember where I saw the centering method listed above, using negative top, right, bottom, left values.
For me, this tehnique is the best, in most situations.
When I use the combination from above, the image behaves like a background-image with the following settings:
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
More details about the first example can be found here:
Maintain the aspect ratio of a div with CSS
Position absolute takes it out of the flow, and places it at 0x0 to the parent ( Last block element to have a position absolute or position relative ).
I'm not sure what exactly you what you are trying to accomplish, It might be best to set the li to a position:relative and that will center them. Given your current CSS
Check out http://jsfiddle.net/rtgibbons/ejRTU/ to play with it
What seems to be happening is there are two solutions; centered using margins and centered using position. Both work fine, but if you want to absolute position an element relative to this centered element, you need to use the absolute position method, because the absolute position of the second element defaults to the first parent that is positioned. Like so:
<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
<p style="line-height:4;">width: 300 px; margin: 0 auto</p>
<div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
<p style="line-height:4;">Absolute</p>
</div>
</div>
<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
<p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
<div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
<p style="line-height:4;">Absolute</p>
</div>
</div>
Until I'd read this posting, using the margin:0 auto technique, to build a menu to the left of my content I had to build a same-width column to the right to balance it out. Not pretty. Thanks!
Use margin-left: x%; where x is the half of the width of the element.