Assume the parent is relative, the child (style-x) is absolute. I used top 50%, left 25% to center the child.
I wish to actually center the child, so I set transform: translate(-50%, -50%). I am unsure if this is centered, so I double check by deleting that line and adding 'margin-top: -55px;' (half of the height), and 'margin-left: -45px;' (half of the width).
These two lines position my element in slightly different locations, yet this is different from my model of CSS. What's going on?
body {
height: 100%;
width: 100%;
margin: 0 auto;
}
#main {
overflow: auto;
height: 64vh;
width: 38vw;
margin: 0 auto;
margin-top: 10%;
position: relative;
border: 1vh solid black;
overflow: hidden;
}
#style-x {
/*Why doesn't translate(-50%, -50%) give me
the same position as setting the margin top and
left to half of the width and height?*/
width: 90px;
height: 110px;
/*
transform: translate(-50%, -50%);*/
margin-top: -55px;
margin-left: -45px;
position: absolute;
top: 50%;
left: 25%;
padding: 2%;
text-align: center;
background: green;
}
#left-col {
float: left;
width: 4%;
height: 101%;
margin-left: 46%;
background: black;
}
#right-col {
float: left;
width: 4%;
height: 101%;
margin: 0 auto;
margin-left: 0;
background: black;
}
<body>
<section id='main'>
<div id='style-x'>X</div>
<div id='left-col'></div>
<div id='right-col'></div>
</section>
</body>
Here's my Codepen if you'd like a visualization.
http://codepen.io/sentedelviento/pen/ORyqzv
There is no problem in your method. Both will try to center based on the values you provide.
The margin method fails cos you aren't using a Box Sizing method like so.
box-sizing: border-box
This results in all your elements to be larger than the height and width specified. Without this, you are telling the browser to add any padding or border to both width & height.
And so your larger element shifts when using using the margin method.
You've set a 2% padding on style-x, and a width of 38vw on #main. When using margins to center things, you would need to account for these varying values.
When you set a percentage padding, its calculated based on the width of the containing block.
The transform method on the other hand, uses the bounding box of the containing block and has no problem centering a larger element.
I'd suggest you include this box-sizing on main and style-x if using the margin method. You could just use
*, after, before {
box-sizing: border-box;
}
This gives better control over dimensions across all elements.
I'm working on making a simple photography website for someone, and I'm stuck trying to figure out the horizontal positioning. I have the margins set to auto on left/right, and the position set on relative. It should go in the middle, shouldn't it?
I have a picture slideshow that I want in the middle, and then there's the navigation that I have on the right side. The nav is in the right place, but the slideshow is stuck overlapping with the navigation and I can't figure out how to get it to center horizontally.
Here's the nav:
#nav {
position: fixed;
top: 22%;
right: 1%;
text-align: center;
}
The rogue slider:
#slider {
background:#000;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height:400px;
width:600px;
margin: 100px auto 0;
overflow:visible;
position:relative;
}
The slider is contained in the wrapper div:
.wrapper {
height: 100%;
width: 55%;
margin-right: auto;
margin-left: auto;
background: #eaeaea;
padding-bottom: 150px;
}
What can be done to get this right?
If you need more info, you can take a look at the page and source code:
bwphotog.com
The child .container element is wider than its parent, .wrapper. If you remove the 960px width of the container it will be centralized.
Change your .container class to this
.container {
margin: 0 auto;
overflow: hidden;
/* width: 960px; */
}
I am working with a set HTML template that makes things a little tricky to customize exactly the way I want. So I am stuck with a structure that somewhat lacks flexibility.
I have a div that takes up 50% width of the page, but I want to center a containing div in the middle of the page. Due to other restrictions in other parts of the page, I really can't change the parent div being set to position: relative.
This is the effect I am after:
This is the code I have so far (which is not working):
HTML:
<div class="parent">
<div class="centerpage"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Berlin_U-Bahn_Train_A3L71.jpg/220px-Berlin_U-Bahn_Train_A3L71.jpg"></div>
</div>
CSS:
.parent {
background-color: #85D782;
height: 400px;
width: 50%;
position: relative;
}
.centerpage {
position: absolute;
}
you can use the old method of absolute and negative margin :
http://codepen.io/anon/pen/Htpen
.parent {
background-color: #85D782;
height: 400px;
width: 50%;
position:relative;
}
.centerpage {
position: absolute;
left:100%;
top:50%;
vertical-align:middle;
margin :-80px 0 0 -110px;/* negative margin is equal to half height/width of image */
}
or use a background-image or gradient http://codepen.io/anon/pen/GDbtg :
.centerpage {
background:
linear-gradient(to right,
#85D782 0%,
#85D782 50%,
#ffffff 50%,
#ffffff
)
;
height: 400px;
text-align:center;
line-height:400px;
}
img{
display:inline-block;
vertical-align:middle;
}
put image into a div and apply class below
{
width: 100px /* with your width whatever it is */;
text-align: center;
padding: 0px;
height: 110px;
display: table-cell;
vertical-align: middle;
}
and add one more class
.centerpage img {
width:100%;
}
I run into this issue a lot where I need the width of an inner container (like a wrapper with a set width of 960px) to span a width of 100%, and I'm unable to touch the html so it must all be done with css.
I know I can position: absolute; that guy to break him out of the wrapper... but is there another... better way?
Here is a JsFiddle link to help make it a little clearer:
http://jsfiddle.net/KRyF6/
<!-- html -->
<div id="container">
<div id="inner-container"></div>
</div>
<!-- CSS -->
#container {
width: 500px;
height: 500px;
background: gray;
margin: auto;
}
/* here's the container that I want to be 100% */
#inner-container {
width: 100%; /* :( */
height: 100px;
background: black;
}
Edit:
Here is a jsFiddle with my absolute position version... what I'd like to know is if this can be done without absolute positioning
http://jsfiddle.net/KRyF6/3/
<div id="container2">
<div id="inner-container2">
</div>
#container2 {
width: 500px;
height: 500px;
background: gray;
margin: auto;
clear: both;
margin-top: 20px;
}
#inner-container2 {
background: black;
width: 100%;
height: 100px;
position: absolute;
left: 0;
}
Well there is another way of doing this.
Body -> Container -> child
Now this way as the title suggest is passing its width to the container and from the container to it's child. This way the child can get the total width of the body.
Explanation
The only problem you are facing here is that an static width will not keep the <body> width in mind(aka the viewport). So you have to use percent values for the width so it will be based on the <body>:
#container {
/*width: 500px;*/
width: 70%;
height: 500px;
background: gray;
margin: auto;
}
Now the child knows that the width of its parent(#container) is 70% of the total body.
However a width of 100% will only get 70% of the <body> width. Instead you need 100% + the 30% of the 70%. And 30% of 70% is like 42%( 35% would be 50%).
Now we got the 100% of the <body>. Now you can let it look like it is outside the container width a negative margin. To center it you want it to be minus half of the 42%(=30% of the body) which you just calculated:
#inner-container {
/*width: 100%; /* :( */
width: 142%;
margin-left: -21%;
height: 100px;
background: black;
}
jsFiddle
However, is this easy to use?
Well it is an answer to your question. It is possible without using position: absolute.
Would position absolute be easier?
Definitely:
#inner-container {
width: 100%; /* :( */
height: 100px;
background: black;
position: absolute;
left: 0;
}
Only two lines of code without any calculates :)
jsFiddle
I'm gonna go out on a limb and say 'no' on this one.
There's no way of making the inner div span the entire width of the page without breaking it out of the document flow, i.e. absolutely positioning it.
I think it could be done only with absolute position:
#inner-container {
width: 100%; /* :( */
height: 100px;
background: black;
left: 0;
position: absolute;
}
Fiddle
Actually, this can be done with calc() in conjunction with viewport units vw
FIDDLE - Working in iE10+
#inner-container {
height: 100px;
background: black;
width: 100vw;
margin-left: calc(250px - 50vw);
}
Actually, according to the spec (see example 14) - this should work (that is - in all browsers), but for now there's a bug where calc doesn't work with viewport units.
Alternatively you could do this:
#inner-container {
height: 100px;
background: black;
margin-right: calc(250px - 50vw);
margin-left: calc(250px - 50vw);
}
-- this way - in IE it will look as required, and on other browsers it will look centered as you have it.
FIDDLE
I would like to make a position: fixed; popup box centered to the screen with a dynamic width and height. I used margin: 5% auto; for this. Without position: fixed; it centers fine horizontally, but not vertically. After adding position: fixed;, it's even not centering horizontally.
Here's the complete set:
.jqbox_innerhtml {
position: fixed;
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}
<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.
</div>
How do I center this box in screen with CSS?
If your div has a known width and height, then you basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle of the div.
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */
Or, if your div has a dynamic/undefined width and/or height, then instead of the margin, set the transform to the negative half of the div's relative width and height.
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Or, if your div has at least a fixed width and you don't care about centering vertically and old browsers such as IE6/7, then you can instead also add left: 0 and right: 0 to the element having a margin-left and margin-right of auto, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:
position: fixed;
width: 500px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;
Again, this works only in IE8+ if you care about IE, and this centers only horizontally not vertically.
I want to make a popup box centered to the screen with dynamic width and height.
Here is a modern approach for horizontally centering an element with a dynamic width - it works in all modern browsers; support can be seen here.
Updated Example
.jqbox_innerhtml {
position: fixed;
left: 50%;
transform: translateX(-50%);
}
For both vertical and horizontal centering you could use the following:
Updated Example
.jqbox_innerhtml {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
You may wish to add in more vendor prefixed properties too (see the examples).
Or just add left: 0 and right: 0 to your original CSS, which makes it behave similarly to a regular non-fixed element and the usual auto-margin technique works:
.jqbox_innerhtml
{
position: fixed;
width:500px;
height:200px;
background-color:#FFF;
padding:10px;
border:5px solid #CCC;
z-index:200;
margin: 5% auto;
left: 0;
right: 0;
}
Note you need to use a valid (X)HTML DOCTYPE for it to behave correctly in IE (which you should of course have anyway..!)
Add a container like:
div {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
Then put your box into this div will do the work.
Edit: as mentioned in the comments, the inner content needs to be set to display: inline-block assuming there're two divs like:
<div class="outer">
<div class="inner">
content goes here
</div>
</div>
Then the CSS for the inner needs to be:
.outer {
position: fixed;
text-align: center;
left: 0;
right: 0;
}
.inner {
display: inline-block;
}
Together with the outer div having a left: 0; right:0; and text-align: center this will align the inner div centered, without explicitly specifying the width of the inner div.
Just add:
left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
Center fixed position element
(the simple & best way I know)
position:fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%));
For centering it horizontally & vertically (if height is same as width)
position:fixed;
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
Both of these approaches will not limit centered element's width less than viewport width, when using margins in flexbox, inside centered element
#modal {
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
inside it can be any element with diffenet width, height or without.
all are centered.
This solution does not require of you to define a width and height to your popup div.
http://jsfiddle.net/4Ly4B/33/
And instead of calculating the size of the popup, and minus half to the top, javascript is resizeing the popupContainer to fill out the whole screen...
(100% height, does not work when useing display:table-cell; (wich is required to center something vertically))...
Anyway it works :)
left: 0;
right: 0;
Was not working under IE7.
Changed to
left:auto;
right:auto;
Started working but in the rest browsers it stop working!
So used this way for IE7 below
if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {
strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
I used vw (viewport width) and vh (viewport height). viewport is your entire screen. 100vw is your screens total width and 100vh is total height.
.class_name{
width: 50vw;
height: 50vh;
border: 1px solid red;
position: fixed;
left: 25vw;top: 25vh;
}
You can basically wrap it into another div and set its position to fixed.
.bg {
position: fixed;
width: 100%;
}
.jqbox_innerhtml {
width: 500px;
height: 200px;
margin: 5% auto;
padding: 10px;
border: 5px solid #ccc;
background-color: #fff;
}
<div class="bg">
<div class="jqbox_innerhtml">
This should be inside a horizontally and vertically centered box.
</div>
</div>
I just use something like this:
.c-dialogbox {
--width: 56rem;
--height: 32rem;
position: fixed;
width: var(--width);
height: var(--height);
left: calc( ( 100% - var(--width) ) / 2 );
right: calc( ( 100% - var(--width) ) / 2 );
top: calc( ( 100% - var(--height) ) / 2 );
bottom: calc( ( 100% - var(--height) ) / 2 );
}
It centers the dialog box both horizontally and vertically for me, and I can use different width and height to fit different screen resolutions to make it responsive, with media queries.
Not an option if you still need to provide support for browsers where CSS custom properties or calc() are not supported (check on caniuse.)
This one worked the best for me:
display: flex;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
To fix the position use this :
div {
position: fixed;
left: 68%;
transform: translateX(-8%);
}
simple, try this
position: fixed;
width: 500px;
height: 300px;
top: calc(50% - 150px);
left: calc(50% - 250px);
background-color: red;
One possible answer:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Center Background Demo</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div.centred_background_stage_1 {
position: fixed;
z-index:(-1 );
top: 45%;
left: 50%;
}
div.centred_background_stage_2 {
position: relative;
left: -50%;
top: -208px;
/* % does not work.
According to the
http://reeddesign.co.uk/test/points-pixels.html
6pt is about 8px
In the case of this demo the background
text consists of three lines with
font size 80pt.
3 lines (with space between the lines)
times 80pt is about
~3*(1.3)*80pt*(8px/6pt)~ 416px
50% from the 416px = 208px
*/
text-align: left;
vertical-align: top;
}
#bells_and_wistles_for_the_demo {
font-family: monospace;
font-size: 80pt;
font-weight: bold;
color: #E0E0E0;
}
div.centred_background_foreground {
z-index: 1;
position: relative;
}
</style>
</head>
<body>
<div class="centred_background_stage_1">
<div class="centred_background_stage_2">
<div id="bells_and_wistles_for_the_demo">
World<br/>
Wide<br/>
Web
</div>
</div>
</div>
<div class="centred_background_foreground">
This is a demo for <br/>
<a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
</a>
<br/><br/>
<a href="http://www.starwreck.com/" style="border: 0px;">
<img src="./star_wreck_in_the_perkinnintg.jpg"
style="opacity:0.1;"/>
</a>
<br/>
</div>
</body>
</html>
Try using this for horizontal elements that won't center correctly.
width: calc (width: 100% - width whatever else is off centering it)
For example if your side navigation bar is 200px:
width: calc(100% - 200px);
This works wonderfully when you don't know the size of the thing you are centering, and you want it centered in all screen sizes:
.modal {
position: fixed;
width: 90%;
height: 90%;
top: 5%; /* (100 - height) / 2 */
left: 5%; /* (100 - width) / 2 */
}
What I use is simple. For example I have a nav bar that is position : fixed so I adjust it to leave a small space to the edges like this.
nav {
right: 1%;
width: 98%;
position: fixed;
margin: auto;
padding: 0;
}
The idea is to take the remainder percentage of the width "in this case 2%" and use the half of it.
Had this problem so I concluded that using a (invisible) container is the best option (based on answer #Romulus Urakagi Ts'ai). To make it with flexbox:
.zoom-alert {
position: fixed;
justify-content: center;
display: flex;
bottom: 24px;
right: 0;
left: 0;
z-index: 100000;
width: 100%;
&__alert {
flex: 0 0 500px;
padding: 24px;
background-color: rgba(212, 193, 105, 0.9);
border: 1px solid rgb(80, 87, 23);
border-radius: 10px;
}
}
(the syntax is SCSS but can be easily modified to pure CSS)
Center element of a div with the property of
position:fixed
Html and Css code
.jqbox_innerhtml {
position: fixed;
width:100%;
height:100%;
display: flex;
justify-content: space-around;
align-items: center;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 5px solid #ccc;
background-color: #fff;
}
<div class="jqbox_innerhtml">
This should be inside a horizontally
and vertically centered box.
</div>
Another simple solution is to set the width of the element to fit-content and set the left and right to 0px;
width: fit-content;
position: fixed;
left: 0px;
right: 0px;
This is useful if you don't know the width of the element.
The only foolproof solution is to use table align=center as in:
<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>
I cannot believe people all over the world wasting these copious amount to silly time to solve such a fundamental problem as centering a div. css solution does not work for all browsers, jquery solution is a software computational solution and is not an option for other reasons.
I have wasted too much time repeatedly to avoid using table, but experience tell me to stop fighting it. Use table for centering div. Works all the time in all browsers! Never worry any more.