This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed last year.
I would like to be able to position the gray container in the middle of the background, also vertically, but I can't understand how the percentages work, why the left one works and the top doesn't
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
body {
background-image: url("wallpaper.png");
background-size: cover;
background-repeat: no-repeat;
position: relative;
top: 0px;
}
.container {
background-color: lightgray;
opacity: 50%;
width: 200px;
height: 200px;
left: calc(50% - 100px);
top: calc(50% - 100px);
position: relative;
}
<body>
<div class="container">
<div class="container-name"></div>
<div class="container-stats"></div>
</div>
</body>
Here is the preview
You need to give the body a height, or else it'll be the elements height, that's why you can't move top or bottom, since the parent (body) is only 200px, since that's all there is. Where the parent doesn't have a height property, it'll automatically adjust to it's content height, 200px in this case. Also, the top property from body can be removed.
You could add height: 100vh; to your body, that'll be the 100%/units height of the view port.
The calc() function you have is taking 50% of it's parent size, then substracting 100px, which in your case is 50% of your element. That'll center the element with percentages.
An alternative to your centering solution could be:
.container {
background-color: lightgray;
opacity: 50%;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
position: relative;
transform: translate(-50%, -50%);
}
This will move your container 50% left of parents width, 50% from the top of parent and then, with transform: translate() move it -50% of it's own size X and Y
You need to give a height to body.
If parent div has a position relative then for setting div according to parent you should give a child div to position absolute.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
body {
background-image: url("wallpaper.png");
background-size: cover;
background-repeat: no-repeat;
position: relative;
top: 0px;
height: 100vh;
}
.container {
background-color: lightgray;
opacity: 50%;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="container-name"></div>
<div class="container-stats"></div>
</div>
HTML:
<div class="wrap-center">
<div class="container">
<div class="container-name"></div>
<div class="container-stats"></div>
</div>
</div>
CSS:
.container {
background-color: lightgray;
opacity: 50%;
width: 200px;
height: 200px;
}
.wrap-center {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 500px;
}
Related
In the example below, I would like word wrap only to happen if the left side of position-me hits the left side of the screen like this.
I think that currently #position-me inherits the width of the parent element and even if I set width: auto !important; in #position-me it still wraps at the parent width.
If I set white-space: nowrap; on #position-me then it overrides the 100px width, but the text overruns the div (and the page potentially!)
#wrapper {
position: absolute;
bottom:0;
right:0;
width: auto;
height: 100px;
background-color: red;
}
#position-me {
position: absolute;
top: 0;
left: 0;
transform: translate(-100%, -100%);
width: auto;
height: auto;
background: green;
}
<div id='wrapper'>
This is the wrapper div
<div id='position-me'>
Text is here and it is great, I wonder when it will decide to wrap itself?
</div>
</div>
https://jsfiddle.net/pfa89bu1/2/
Use a big negative margin left, limit the width to the width of the screen minus the red box width and use bottom/right for the position:
#wrapper {
position: absolute;
bottom: 0;
right: 0;
height: 100px;
background-color: red;
}
#position-me {
position: absolute;
bottom: 100%;
right: 100%;
margin-left: -200vmax;
max-width: calc(100vw - 100%);
background: green;
}
<div id='wrapper'>
This is the wrapper div
<div id='position-me'>
Text is here and it is great, I wonder when it will decide to wrap itself?
</div>
</div>
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>
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;
}
}