This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
My issue
Usually when using percentages inside a margin property the browser uses the width of the nearest positioned ancestor as reference length. However I'd like to set the margins of my element relative to its parent's height. Is that somehow possible? Or am I stuck with a JavaScript solution?
An example
Specifically I'd like the following:
.child {
height: 1em;
width: 1em;
background: red;
display: inline-block;
margin: calc((100% - 1em) / 2);
/* margin: calc((5em - 1em) / 2); In absolute units */
/* margin-sizing: height; If only there was some magical property like this... */
}
.container {
background: green;
height: 5em;
width: 15em;
position: relative;
}
<div class="container">
<div class="child"></div>
Something
</div>
To look like this:
I know that I could use absolute units in the example above. However I may not always know the exact height of the parent in a more complex or dynamic example. And I'd like to avoid JavaScript for this.
Edit
I should clarify something. My end goal is that the red div in the example above is centered vertically but also has the same distance to the left as it has to the top/bottom. Obviously I'm not bound to specifically use the margin properties. But the outcome of your solution should be the same.
If you can just use margin or padding then you are stuck because the top and bottom of these properties are relative to the parent's width when used as percentages (as you mentioned already).
The only solution I see is keep the parent element in position: relative and use top & bottom to the child element (which is in position: absolute) to use in percentages.
.child {
height: 1em;
width: 1em;
background: red;
display: inline-block;
--calc: calc((100% - 1em) / 2);
top: var(--calc);
left: var(--calc);
right: var(--calc);
bottom: var(--calc);
position: absolute;
/* margin: calc((5em - 1em) / 2); In absolute units */
/* margin-sizing: height; If only there was some magical property like this... */
}
.container {
background: green;
height: 5em;
width: 15em;
position: relative;
}
<div class="container">
<div class="child"></div>
Something
</div>
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
Here is the link to my fiddle for reference.
.container {
background-color: gray;
position: relative;
padding: 20px;
height: 70%;
/* uncomment this and will work as expected */
/* height: 70px; */
}
.child1 {
width: 75%;
display: inline-block;
height: 100px;
}
.child2 {
background-color: green;
width: 75%;
float: right;
height: 100%;
}
<div class="container">
<div class="child1">Child 1</div>
<div class="child2">Child 2</div>
</div>
Parent's height is 100px(can see in devtools) after calculation for child1.
Child2 is applied 100% height equaling to 100px, but in computed style(can see in devtools) it is showing 0px.
I am assuming it's because parent's height is calculated at run-time. Any help?
Because parent height is also in percentage. It will work in the following conditions:
Parent of your div has 100% height
Parent of your div has fixed height
Parent of your div has some content and due to which it has some height.
Currently, it does not know 100% of what.
Using a % value in height requires one of the following:
If all parent elements have a percentage height, ALL parent elements to have their height explicitly defined.
Otherwise, a parent element must have a fixed height (not a %).
The parent of your .container element probably doesn't have a height value defined, or the parent of that element, etc.
Remember that the html and body elements count too.
html, body
{
height: 100%;
}
This question already has answers here:
CSS Div width percentage and padding without breaking layout
(3 answers)
Margin-Top push outer div down
(8 answers)
Closed 8 years ago.
New to this, so apologies if I missed a crucial lesson in CSS...
I'm trying to do a simple exercise in CSS... a div within a div, both sized with percentages so they respond to a changing window size. Here's my code:
<head>
<title>Percentage Test</title>
<style>
html, body {
height: 100%;
margin: 0;
}
#outer {
height: 100%;
width: 100%;
background-color: yellow;
}
#inner {
height: 90%;
width: 90%;
/* margin: 5%; */
background-color: blue;
}
</style>
</head>
<body>
<div id="outer"><div id="inner"></div></div>
</body>
Everything does just what I thought; the outer div takes up the whole screen and the inner div takes up 90% of the outer div. If I add to this (i.e. add another inner div, change the percentages) everything does what I would expect. If I add a surrounding margin to the inner div (in this case, 5% but commented out), I would expect the inner div to be centered (top/bottom, left/right) within the outer div. It works for the sides and the bottom but not the top. Instead, the outer div is pushed away from the body at the top (I assume 5% but I'm not sure). Any thoughts on why this happens?
Box-sizing will include padding and borders within the widths size.
DEMO
#outer {
height: 100%;
width: 100%;
padding:5px;
background-color: yellow;
box-sizing:border-box;
}
#inner {
height: 100%;
width: 100%;
/* margin: 5%; */
background-color: blue;
box-sizing:border-box;
}
TIPS
Top margins often fail in some browsers.
Use margin-bottom or padding-top to create the vertical space.
Height 100% will not stretch to fit the outer most container without additional hacking.
The div will only be the size of it's content.
This is the way the CSS box model works by default. The dimensions of an object is the set width/height plus any borders/margin/padding.
To have any borders/margins/padding included in the specified width, use the box-sizing:border-box; setting on that element in your CSS.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS height 100% in IE7
I'd like to have a centered block on a webpage that's filled to 100% by a child div.
Here is my HTML code:
<div id="parent">
<div id="child"></div>
</div>
Here is my CSS:
#parent {
position: absolute;
background-color: blue;
top: 2em;
left: 4em;
bottom: 3em;
right: 2em;
}
#child {
position: relative;
background-color: red;
height: 100%;
}
And here is a JSfiddle:
http://jsfiddle.net/XMS2G/1/
The problem is that in Internet Explorer 7, the browser does not cause the child div to expand to the entire parent div. How would I accomplish this without using Javascript?
Consider using position:absolute for child as well. And then just use top:0px; bottom:0px; right:0px; left:0px;
I think it will work.
You need to give the child position: absolute and set left, right, top, bottom to 0.
See it in action.
You'll likely have to set a hard-coded width for the parent DIV to get IE7 to behave nicely. the centering can be done with the "margin-left: auto;" "margin-right: auto;" css.
Horizontally aligning a div-element within another div-element can be achived with margin: 0 auto; as long as they both have a width-property other than auto, but this does not apply for vertical alignment.
How can you vertically align a div within another div?
There are a number of different approaches to this, based on various ideas. Given that the element has a fixed height (in px, % or what have you), the best solution I've found so far is based on the following principle:
Give the parent div position: relative; and the child div position: absolute;, to make the child absolutley positioned in relation to the parent.
For the child, set top, bottom, left and right to 0. Given that the child also has a fixed width and height that is less than the size of the parent, this will push the browser into an impossible situation.
In comes margin: auto; on the child, as the browsers savior. The browser can now add enough margin on all sides to let the child-element keep its size, yet still fill out the entire parent as forced by top, bottom, left and right set to 0.
TADAAA! The element gets vertically and horizontally aligned within the parent.
Markup
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
width: 200px;
height: 200px;
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
}
A working example
http://jsfiddle.net/sg3Gw/
I find it easiest to use display:table-cell; vertical-align:middle; here's a jsfiddle
<style>
.a {
border:1px solid red;
width:400px;
height:300px;
display:table-cell;
vertical-align:middle;
}
</style>
<div class="a">
<div>CENTERED</div>
</div>
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
I have a css class defined so I can make a div to use all the browser's viewport, the rule is the following:
.fullscreenDiv {
background-color: #e8e8e8;
width: 100%;
height: auto;
bottom: 0px;
top: 0px;
left: 0;
position: absolute;
}
Now I want the text inside the div to be in the exact center of the screen so, vertical align center and horizontal align middle, but I can't seem to find the proper way to do so.
It only needs to work on webkit based browsers.
I already tried to add a P element inside with display set to table-cell (a common way of centering text) without luck.
Any suggestions?
The accepted answer works, but if:
you don't know the content's dimensions
the content is dynamic
you want to be future proof
use this:
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
More information about centering content in this excellent CSS-Tricks article.
Also, if you don't need to support old browsers: a flex-box makes this a piece of cake:
.center{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Another great guide about flexboxs from CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The standard approach is to give the centered element fixed dimensions, and place it absolutely:
<div class='fullscreenDiv'>
<div class="center">Hello World</div>
</div>
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
}
DEMO
There is no pure CSS solution to this classical problem.
If you want to achieve this, you have two solutions:
Using a table (ugly, non semantic, but the only way to vertically align things that are not a single line of text)
Listening to window.resize and absolute positionning
EDIT: when I say that there is no solution, I take as an hypothesis that you don't know in advance the size of the block to center. If you know it, paislee's solution is very good
text-align: center will center it horizontally as for vertically put it in a span and give it a css of margin:auto 0; (you will probably also have to give the span a display: block property)