OK, this is a bit of a mouthful and very super specific. I will try my best to explain!
The goal is to maintain aspect ratio while scaling an image and keeping it vertically and horizontally centred inside a DIV that is defined only by percentages. The image needs to maintain best fit, so if max width is required then it's used and vice versa.
Use Firefox version 33 (or a few earlier versions) to view this js fiddle to see it working properly:
http://jsfiddle.net/3vr9v2fL/1/
HTML:
<div id="imageviewer" >
<div class="dummy"></div>
<div class="img-container centerer" id="imagevieweroriginal">
<img class="centered" src="http://chrisnuzzaco.com/couch/uploads/image/gallery/smiling_woman_wearing_drivers_cap.jpg" alt="Doctor Concentrating on Work"></img>
</div>
</div>
</div>
CSS:
#imagewrapper{
position:absolute;
width:69%;
height:100%;
top:0px;
bottom:0px;
background-color:gray;
}
#imageviewer{
position:relative;
width:100%;
height:100%;
}
.responsive-container {
position: relative;
width: 100%;
border: 1px solid black;
}
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.centerer {
text-align:center; /* Align center inline elements */
font: 0/0 a; /* Hide the characters like spaces */
}
.centerer:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.centered {
vertical-align: middle;
display: inline-block;
max-height: 100%;
max-width: 100%;
}
The Problem:
I originally found my code here on stackoverflow and made a simple mod adding max-height/width to the .centered class. At the time, this worked in all major browsers. The only exception being Opera.
Vertically align an image inside a div with responsive height
There is a big problem however: the latest version of Chrome (Version 38.0.2125.111) no longer works with this code and my users prefer chrome to other browsers by a large margin.
Any ideas on how to solve this? Is this a bug with Chrome? I'm open to javascript suggestions to make this work again.
I came up with this: JSFiddle - centered image keeps aspect ratio in resizable fluid container
.container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.image {
position: absolute;
max-width: 100%;
max-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
width: 100%;
height: 100%;
position: absolute;
margin: 0;
}
<div class='container'>
<img class='image' src='http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg'>
</div>
The image stays centered both horizontally and vertically. If the window is scaled down the image shrinks respecting original aspect ratio.
I didn't test it on all browsers though.
Take a look at CSS object-fit property:
You may need a polyfill for older browsers, though.
View browser support for object-fit.
I have a CSS problem that only occurs in Google Chrome. Objects set to overflow: hidden are being 'clipped' at the edges when within a horizontally centred container, and only at
odd browser widths, and only on a high-res display.
HTML:
<html><body>
<div id="container">
<div class="sprite"> </div>
</div>
</body></html>
CSS:
#container
{
margin: 0 auto;
max-width: 800px;
-webkit-transform: translate3d(0px,0px,0px);
}
.sprite
{
width: 30px;
height: 30px;
overflow: hidden;
position: relative;
}
.sprite:after
{
content: ' ';
overflow: hidden;
display: block;
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
background-image: url("/img/sprite#2x.png");
background-position: 0 0;
background-repeat: no-repeat;
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
-o-background-size: 30px 30px;
background-size: 30px 30px;
}
Now, as I resize the width of the window, at odd window widths the sprite gets clipped either side on my retina display. It does not occur on a standard (1 css pixel to 1 display pixel) display.
This apparent rendering bug does not occur in Safari or Firefox. This is on OS X 10.9.3 running Chrome 35.
Edit: It also happens with a pure CSS circle shape, so doesn't seem related to the use of a background image.
My example was too over-simplified so the problem didn't occur standalone.
It turns out that, via a SASS mixin in my full application, I had the following applied to the panel containing the sprite (edit question to include it)
-webkit-transform: translate3d(0px,0px,0px);
This was there to improve CSS performance with hardware acceleration where available (mainly iOS).
Removing this improves the situation slightly, so it seems less likely to 'clip' the shape when resizing the window.
However removing overflow: hidden from the :after element seems to have solved it entirely.
It is worth noting that this 'clipping' side-effect occurs even with a pure CSS circle, it's not related to background-images (thanks #Rohit).
This seems to be a rendering bug rather than something I'm doing wrong.
Hey now you can try this with out image
Css
#container
{
margin: 0 auto;
}
.sprite
{
width: 30px;
height: 30px;
position: relative;
text-align:center;
line-height:30px;
font-weight:bold;
}
.sprite:after
{
content: ' ';
overflow: hidden;
display: block;
position: absolute;
top: 0;
left: 0;
right:0;
bottom:0;
background:#eecc00;
border-radius:50%;
z-index:-1;
}
HTML
<div id="container">
<div class="sprite">! </div>
</div>
Demo
i want to place text on top of the image inside container with width 80%
conainer.width 80% - code below not working
conainer.width 100% - code below working
screen shot of my brouser
<style type="text/css">
.conainer {
margin: auto;
width: 80%; /* change that to 100% code will work */
border: thin solid #000;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
</style>
<div class="conainer">
<div class="image">
<img src="img/banners.jpg" width="100%" height="100%" />
<h2>some text gos here</h2>
</div>
</div>
You should just set the background of your div, instead of trying to place the h2 on top of an img tag
It works for me. Is there any more code?
I think the most code-efficient and compatible method would be to define your banner image as the background-image of div.image using CSS.
Replace your h2 style as
h2 {
position: fixed;//yours is on top of image but absolutely positioned, so not visible
top: 200px;
left: 0; //Specify where you want to put your image with top and left properly now.
width: 100%;
}
Ok! i found the problem change top 200 => top 0
h2 {
position: absolute;
top: 0px;
left: 0;
width: 100%;
I'm trying to stretch a background image to 100% width and height of the parent div. background-size is not supported in IE8 of-course. I tried the following code but it's not working.
.box:before {
background: url(images/body_background2.png) no-repeat;
display: block;
position: absolute;
z-index: -1;
height: 100%;
width: 100%;
content: '';
}
Use a <img> with position:fixed;top:0;left:0;width:100%;height:100%; and negative z-index. There's unfortunately no way to implement this behavior in IE 8 using only CSS.
See the following article for further information: How Do you Stretch a Background Image in a Web Page.
If you wish to use an image as a background for a given <div> try the following approach:
<div class="fullbackground">
<img class="fullbackground" src="yourImageSrc" />
</div>
.fullbackground{
position:relative;
}
img.fullbackground{
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%; /* alternative: right:0; */
height:100%; /* alternative: bottom:0; */
}
I use this article often to do my full screen backgrounds :)
http://css-tricks.com/perfect-full-page-background-image/
Using the AlphaImageLoader filter and setting the sizingMethod to scale seems to do the trick according to Perfect Full Page Background Image.
HTML:
<img class="fullscreen" src="fullscreen.jpg" />
CSS:
img.fullscreen {
border: 0;
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
padding: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1001;
}
Have a look at https://github.com/louisremi/background-size-polyfill. This is a nice plugin another member of my team came across for the same issue.
Once you have the script included into your solution, add the following line into the relevant CSS class along with any other sizing/positioning attributes you may wish to add.
-ms-behavior: url(/scripts/backgroundsize.min.htc);
We have this implemented for full width images and widget backgrounds and it works a treat.
This (demo) does the trick (digestable version of css-only technique #2 from http://css-tricks.com/perfect-full-page-background-image/):
<div class="background-size_cover">
<img src="images/body_background2.png">
</div>
and
.background-size_cover {
top: -50%;
left: -50%;
width: 200%;
height: 200%;
position: relative;
}
.background-size_cover img {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
position: absolute;
}
You'll want to make sure that the parent div is overflow: hidden; besides having whatever dimensions you want the image to get stretched to fit in.
I combined AlfaImageLoader filter with css3 background-size and worked on all browsers. Here's what i did.
background : url('../images/background.jpg') no-repeat ;
background-size: 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/background.jpg',sizingMethod='scale');
By the way, you need to put your background image to your wrapper div in this method.
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.