This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 8 years ago.
Here's my situation: I'm trying to make a page with two DIVsfilling whole page (height 100%, width 50% each). Also, the content in the DIVs is to be vertically aligned to middle.
Is there an easy way to achieve this without hacks or javascript?
I've tried body,html{height:100%;} .mydiv {display:table-cell;height:100%;vertical-align-middle}
but that doesn't work...and with that code, i have to specify width in pixels instead of percentage
Live Demo
I just made a jsFiddle showing my suggestion to a solution. Here I take into account that you want two <div>s filling 50% of the width each, 100% height, and that you want the content to be vertically aligned in the middle. Here is the simplified working solution with source code.
HTML
<div id="outer">
<div id="table-container">
<div id="table-cell">
This content is vertically centered.
</div>
</div>
</div>
CSS
#outer {
position:absolute;
top:0;
left:0;
width:50%;
height:100%;
}
#table-container {
height:100%;
width:100%;
display:table;
}
#table-cell {
vertical-align:middle;
height:100%;
display:table-cell;
border:1px solid #000;
}
For reference, I used this tutorial.
position: absolute;
top: 0;
bottom: 0;
Will give you a box that fills to 100% height. Make sure your HTML and BODY tags are large enough:
html, body {
height: 100%;
}
Do you want this type of design ? => Example Fiddle
Related
This question already has answers here:
How to set the margin or padding as percentage of height of parent container?
(8 answers)
Closed 5 years ago.
I have the following css in a page to always make my picture centered:
img {
padding: calc(49% - 306px);
}
The problem I have is that the "49%" is basing off the page width, and not height as I want. Is there a way I can change that? Thanks!
Note: My picture is in a <div align="center"> to center it horizontally
Without having full context of what you're trying to do, I'd guess CSS Flex is your best bet. The snippet I've attached shows you one method of centering an image inside a div when the image is not a full-sized background.
Keep in mind that this solution will need to be re-worked a little for your application.
.container {
border:1px solid red;
margin:0 auto;
display:flex;
height:500px;
width:500px;
justify-content:center;
align-items:center;
}
<div class="container">
<img src="https://www.w3schools.com/howto/img_fjords.jpg" width="100px" height="100px">
</div>
You could change the img element to a div and get the image as a background image like this:
div {
width:100%;
height:100%;
background:url(logo.png) center center no-repeat;
}
Can you use flexbox?
html, body, div.center {margin: 0;height: 100%;}
div.center {display:flex; align-items: center;}
img {
flex: 0 0 auto;
margin: auto;
}
<div class="center">
<img src="//placehold.it/306x100" alt="">
</div>
Demo: http://output.jsbin.com/xotupegove
This question already has answers here:
How to set the margin or padding as percentage of height of parent container?
(9 answers)
Closed 7 years ago.
I have very simple markup and style rules that should put my div in the middle of the page, but it does not (actually, the top of the div would be at the middle, not 100% truly centered vertically) when the viewport is of a small enough height.
HTML:
<div>adf</div>
CSS:
div {
background-color:red;
margin-top:50%;
}
You can look at my Fiddle to see this. It will require you shrink the rendered window (bottom right) a bit, as it is correct initially.
Instead of 50% try 50vh
50% doesn't do what you think it would - it actually uses the width of the parent container, not the height to calculate.
Try replacing percentages with vh
div {
background-color:red;
margin-top:50vh;
}
<div>adf</div>
Here are more cool stuff about viewport sized measures
Here is another solution:
http://jsfiddle.net/nb6pq14v/
html, body{height:100%; margin:0;padding:0}
.container-fluid{
height:100%;
display:table;
width: 100%;
padding: 0;
}
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
.centering {
float:none;
margin:0 auto;
background: #abc;
height: 25px;
}
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center">
</div>
</div>
</div>
First I'll list my code and the link to JSFiddle.
HTML
<div id="wrapper">
<div id="container">
<div id="content">
Here is the content
</div>
</div>
</div>
JS
body,html{height:100%;}
#wrapper{
height:100%;
background-color:green;
}
#container {
display: inline-block ;
height:100%;
width:100%;
background-color:red;
text-align:center;
vertical-align:middle;
}
#content
{
display:inline-block;
background-color:blue;
}
http://jsfiddle.net/x11joex11/b4ZBg/
(Newer one with more content for vertical center testing)
http://jsfiddle.net/x11joex11/sDWxN/11/
What I'm trying to do is vertically center the blue highlighted DIV in the center of the red div. Is there a way to do this using inline-block and not table-cells?
The height of the containing div also HAS to be 100% not a set pixel amount.
The content will also be variable height
I am trying to avoid table-cell display because of browser bugs, but if it's the only option I would like to know that also. Any solution to this issue would be appreciative.
The art of vertical centring with inline-block is to understand that the inline-level elements are centred in their line-box. So you need to make the line-height match the height of the containing box.
The line-height is determined by a combination of the line-height setting of the containing block and the content of the line.
However the line-height of the containing box cannot be set in terms of a percentage of the height of the containing box, so that provides no solution.
Instead, we can create some content on the same line as the content we want to align that's the height of the containing block using
#container:before {
display:inline-block;
content: '';
height:100%;
vertical-align:middle;
}
which will force the line height be tall enough to contain that content.
The other thing necessary is to note that vertical-align is applied to the boxes being aligned, rather than the containing box.
The result is http://jsfiddle.net/9j95x/
You can use:
top: 50%;
position: relative;
on #content, like so:
#content
{
display:inline-block;
background-color:blue;
position: relative;
top: 50%;
}
Fork: http://jsfiddle.net/brandonscript/sDWxN/9/
Here's my quick response: http://jsfiddle.net/H9nHh/
Basically use:
display:table; for #container
and display:table-cell; for #content. I then created another div with a class for x to style it to your needs.
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 9 years ago.
I was wondering what would be the best way to vertically center a div inside another div. The only constraint I have is that .anim needs to remain relative! I lsited the current code I have now down below. Thanks guys!
HTML:
<div class="anim">
<div class="spacer">
<p>CONTENT</p>
<p>more content</p>
</div>
</div>
CSS:
.anim {
position:relative;
width:75%;
margin:auto;
height:50%;
}
.spacer{
position:absolute;
height:300px;
top:0;
bottom:0;
}
.anim{display:table;}
.spacer {display:table-cell; vertical-align:middle;}
would have it vertically aligned
An easy way to do this is to give your .anim div a fixed height of, let's say, 500px.
Then you can just add a margin-top :
.anim {
margin-top: 100px; // (500 - 300) / 2 = 100
}
demo
according to w3: http://www.w3.org/Style/Examples/007/center.en.html#vertical
CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.
so the code is really simple
.anim {
display: table-cell;
vertical-align: middle;
height: 200px;
}
here is the demo http://jsfiddle.net/AbTxS/
From your question it looks like you want something like this... div.spacer is vertically centered and div.anim remains relative.
The div.spacer top margin must be negative half of the .spacer height.
This solution only works with a fixed height for .spacer.
CSS
.anim {
position:relative;
width:75%;
margin:auto;
height:800px;
background:#FF0
}
.spacer {
position:absolute;
top:50%;
margin:-150px 0 0;
width:300px;
height:300px;
background:red
}
HTML
<div class="anim spacer">
<p>
Content
</p>
<p>
More content
</p>
</div>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to make an image center (vertically & horizontally) inside a bigger div
I am trying to make an image gallery on my website,
but I cannot center the image inside the div.
The CSS for the div is:
#animation
{
display : none;
position: absolute;
z-index:1;
background : rgba(0,0,0,0.7);
height: 100%;
width: 100%;
border: 0px;
}
And the image id is:
#pictures
{
...
}
One way to do it is a table cell display and vertical align: middle;
Fiddle
margin:auto; add autommatic margin and center the image have a try, but I need more code , could you post it?
margin:auto;
it will automatically center your div by adding equal margin to the left and right of your div block element
Check out these resources:
If you know the width of the div - How to make an image center (vertically & horizontally) inside a bigger div
If you don't know the width of the div - http://doctype.com/css-centering-wide-image-unspecified-dimensions-div-unspecified-dimensions
Put your image inside div and center it like this:
Fiddle here
div{
width:300px;
height:300px;
margin:0px auto;
margin-top:30px; //to pull it down
}