This question already has answers here:
How to center div in the page? (Height & Width)?
(2 answers)
Closed 8 years ago.
I mean, if i have a div, with 200px of height and 200px of width, and i want to align it vertically (i can align it horizontaly with "margin: auto", but, is there a way to align it vertically without knowking the height of the screen?
Thanks and sory for my english, it's not my native language
edit: height of the screen
Centering things with table display is pretty handy... Take a look at this this:
http://jsfiddle.net/F9J4B/
Note that this is not "layouting with table"... It's just three divs that are using the table's display rules. No semantics rules are broken =)
HTML
<div class="table">
<div class="tr">
<div class="td">
<p>Hello! I'm a DOM element. <br>I can be whatever size i want, and still still be in the center of things.</p>
</div>
</div>
</div>
CSS
body,
html {
height:100%
}
.table {
width: 100%;
height: 100%;
display: table;
background-color: #eee;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Here's an example, FIDDLE
div {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
Centering a box inside another box:
div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
regardless of the size of the boxes.
The outer box may need position: relative; for the inner boxes' positioning to work.
The Media Query handles the image when the screen gets too small.
.vertcenterdiv {
position: absolute;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/2/27/Square_200x200.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
#media (max-width: 200px) {
.vertcenterdiv {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
margin-top: 0;
margin-left: 0;
}
}
Related
I am trying to center the ajax loader. But no luck. Loader appears on right corner of the screen. Appreciate assistance. Below is the code
div.amshopby-overlay {
background-color: #fafafa;
height: 100%;
left: 0;
opacity: 0.5;
filter: alpha(opacity = 50);
position: absolute;
top: 0;
width: 100%;
z-index: 555;
}
div.amshopby-overlay img {
top: 100px;
left: 45%;
display: block;
position: absolute;
}
div.amshopby-overlay div {
margin: 0 auto;
display: block;
width: 300px;
height: 200px;
background: url('../images/amshopby-overlay.gif') 50% 50% no-repeat;
}
Try this css.
<div class="container">
<img src="loader.gif" class="loader">
</div>
CSS
.container{position:relative; height:300px;width:300px;}
.loader{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}
A solution I like to do when whatever I'm centering is just an image is to do it with the css background property:
HTML
<div id="container"></div>
CSS
#container.loader{
background:url('loader.gif') center center no-repeat;
}
Now in your javascript, add the class loader when you make the ajax request and remove the class on complete.
So I assume the div inside the amshopby-overlay contains your loader image. Give it a try:
div.amshopby-overlay div {
display: block;
width: 300px;
height: 200px;
background: url('../images/amshopby-overlay.gif') 50% 50% no-repeat;
/* Add this */
position: absolute;
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: 150px;
}
Basically, top and left will push the div 50% from top and left. And we will add -50% of the div width and height value to center in vertically and horizontally. Give it a try. Hope it helps.
"margin: auto" should give you the centering style you want. CSS details below.
HTML
<div class="container">
<img src="http://placehold.it/150x150" class="loader">
</div>
CSS
.container {
/*Absolute positioning will now be relative to this tag*/
position:relative;
/*Arbitrary Height*/
height:300px;
width:300px;
/*border to show container*/
border: 1px solid;
}
.loader {
/*Allow top, left, right, bottom
to be set relative to container*/
position: absolute;
/*Set edges of tag so margin auto knows the max boundry*/
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
/*Allows the use of margin auto*/
display: block;
/*Horizontally and vertically centered
(Display block will fill remaining margin space equally)*/
margin: auto;
}
jsfiddle
http://jsfiddle.net/16vrxgxh/1/
Stack Overflow seems to be full of similar questions but I haven't found a satisfying answer for my use case. Basically, I need a responsive, full screen background image for the top part of my front page. Means, narrowing the viewport leads to cropping, not stretching; the image should be centered. I'd like to avoid JS for this.
Aaron created a fiddle that almost looks like what I'm searching for. Two problems:
Strange behaviour when narrowing viewport (below 500px width)
position: fixed;
I was able to reproduce the solution of Bryce Hanscomb and Gabriela Gabriel for a container (see my fiddle):
But I failed to extend this to full screen. This is my code (see fiddle):
HTML:
<div id="background">
<img src="//dummyimage.com/600x200/0099cc/fff.png" />
</div>
CSS:
div#background {
background-color: orange;
min-height: 100%;
min-width: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: -1;
}
img {
left: 50%;
position: relative;
transform: translate(-50%, 0);
min-height: 100%;
min-width: 100%;
}
Problem #1: The image doesn't take up the full height of its parent div (with min-height set to 100%).
Problem #2 + #3: In a narrow viewport, the image is cut off on the right (not centered), and a horizontal scrollbar is shown.
As a side note, can somebody tell me where those 4 pixels come from?
Your image will fill the entire space and also not have the problem of not being centered if you use position:absolute on your image
div#background {
background-color: orange;
min-height: 100%;
min-width: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: -1;
}
img {
left: 50%;
position: absolute;
transform: translate(-50%, 0);
min-height: 100%;
min-width: 100%;
}
The issue with the 4px at the bottom is because images always align to the top just like text, this also adds a bit of padding to the bottom to make the baseline for the text so that letters can hang down under the rest.
If you set vertical-align: bottom it should fix it like so:
h1 {
text-align: center;
}
div#container {
background-color: black;
height: 200px;
width: 100%;
margin: 50px auto;
}
div#content {
background-color: orange;
min-width: 100%;
overflow: hidden;
}
img {
left: 50%;
position: relative;
transform: translate(-50%, 0);
vertical-align: bottom;
}
<div id="container">
<div id="content">
<img src="//dummyimage.com/600x200/0099cc/fff.png" />
</div>
</div>
For the centre aligning of the image, I would personally recommend actually using css background-image and then setting the background-position like so:
div#background {
background-color: orange;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 0;
z-index: -1;
background: url(//dummyimage.com/600x200/0099cc/fff.png) center center no-repeat;
background-size: cover;
}
<div id="background">
</div>
I have this simple HTML code, but make me frustrated because it can't center vertically :
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
and here's my CSS :
.outer {
position: relative;
height: 350px;
}
.inner {
position: absolute;
height: 100px;
top: 50%
}
the .inner div is really center vertically, but based on top side of it. because of top: 50%, what I want is this .inner div really centered vertically on top of .outer. how to do that?
You can center your element using css3 even if you don't know the dimensions.
.inner {
position: absolute;
height: 100px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Since you know the height of both elements you can set your top to top: 125px;
(350 - 100) / 2.
UPDATED WITH JQUERY
http://jsfiddle.net/yf0ncd7f/
Actually an easy way to center a absolute div is to use margin: auto;
section {
width: 100%;
height: 800px;
position: relative;
background: #eee;
}
div {
width: 500px;
height: 300px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: orange;
}
<section>
<div></div>
</section>
I added borders to differentiate clearly
Is this you want?
http://plnkr.co/edit/JRct1x95gnIUl8jITzG0?p=preview
.outer {
position: relative;
height: 150px;
border : 1px solid #f00;
}
.inner {
position: absolute;
height: 80px;
top:0;
bottom:0;
margin:auto;
border : 1px solid #0f0;
}
You could use this CSS trick to make the div vertically centered (and optionally horizontally as well). This works for a parent div of any height and width, as long as they are specified.
.inner {
position:absolute;
// The height and width of the element have to be set for this to work
height:100px;
width:100px;
// Setting the top and bottom to 0px as well as the margins to auto
// causes the div to be centered vertically.
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
// To also center the div horizontally, do the same for
// left, right and the margins.
left: 0px;
right: 0px;
margin-left:auto;
margin-right:auto;
}
Note that this solution only works when the height of the parent div is known beforehand and is specified. So the parent element needs to have height:100px or whatever amount of pixels you need it to be. Also the height can't be percentual, meaning that if the height of the parent div is declared as height:50%, this will NOT work.
The inner div can actually have a
You can set it by line-height property set it to the height of the div as in your code it should be line-height: 100px;
.outer {
position: relative;
height: 350px;
background: gray;
}
.inner {
position: absolute;
height: 100px;
line-height: 100px;
background: blue;
}
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
I'm working on a prototype of a website here:
http://www.paulgrantdesign.com/valcomp/index.php
I have a div in the middle that is set to stick in the middle. It's got a given height, so in the css I did
#middle {
height: 225px;
width: 100%;
background-color: #56a6c4;
position: absolute;
top: 50%;
margin-top: -112px;
z-index: 100;
}
It sits in the middle, as required. But when the window gets too small, I don't want it to cover what's above it. Can I set it so that there's always a minimum amount of distance between the top of the window and the top of this div?
May be you can use media query for this like this:
#media only screen
and (min-width : 1000px) {
#middle {
color:red;
}
}
You can read these articles
http://css-tricks.com/6731-css-media-queries/ ,
http://css-tricks.com/6206-resolution-specific-stylesheets/
put position:relative on the body.that s a first step. I m trying..hold on..
and bottom--position:absolute. It works! yeah!
I fixed your problem by changing your html like this:
<div id="container">
<div id="top">
<div id="topcontent">
<p id="mobile">Mobile data collection</p>
<p id="slogan">Collect. Send. That's it.</p>
</div>
</div>
<div id="middle"></div>
</div>
Then changing your css like this:
#container{
width: 100%;
position: absolute;
min-height: 350px;
bottom: 20%;
top: 0;
}
#top {
width: 825px;
min-height: 250px;
display: block;
position: absolute;
left: 50%;
height: 50%;
margin-left: -412px;
overflow: auto;
bottom: 250px;
}
#topcontent {
width: 100%;
position: absolute;
bottom: 0;
}
...
#middle {
height: 225px;
width: 100%;
background-color: #56a6c4;
position: absolute;
bottom: 0;
margin-top: -112px;
z-index: 100;
}
It might need some tweaking to get it exactly how you want it; especially with the #bottom div
You need to add the attribute z-index to the elements #top and #bottom, and let them less than the z-index of #middle.
i would like to center a popup div how can i do that browser friendly????
this is the original a bit to the left.
<div class="popLayerWrapper">
<div id="addBookmarksLayer" class="popLayer" style="left:260px; padding:30px;">
<div class="closeLayer" >close</div>
<div class="layerContent"></div>
</div>
</div>
Not sure I understand which part you want to center, but assuming the whole thing:
.popLayerWrapper {
position: absolute;
width: 40%; /* could be anything */
left: 50%;
margin-left: -20%; /* half of width */
height: 40%; /* again, could be anything */
top: 50%;
margin-top: -20%; /* half of height */
}
I use this code to center an element in the center of the window viewport:
html {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
body {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
margin:0;
}
#center {
margin: auto;
}
You will find a full example at this link (Bredele CSS bundle). I think it should work for your popup.
Olivier