I'm trying to center a div vertically using line-height, without specifying a set pixel value for the line-height. I need the line-height to expand to the size of it's div. Using '100vh' works, but viewport units aren't widely supported widely enough. Setting the line-height to 100% doesn't seem to work. Here's my HTML:
<div class="background">
<div class="lightboxbg">
<div class="wrapper">
<div class="centerme"></div>
</div>
</div>
</div>
And my CSS:
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
.background {
width: 90%;
height: 100%;
background-color: AntiqueWhite;
}
.lightboxbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
vertical-align: middle;
text-align: center;
}
.wrapper {
vertical-align: middle;
line-height: 100%;
height: 100%;
width: 100%
}
.centerme {
vertical-align: middle;
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
And here's a jsfiddle. The blue box would be centered if I could get the line-height of wrapper to expand to the height of wrapper, but I don't know how to go about doing that. Thanks for reading.
EDIT: Check out Nathan Lee's answer for a solution with table cells, Fredric Fohlin's for a pretty wild 'absolute positioning' answer, and MM Tac's for a solution using absolute positioning.
Here you go.
WORKING DEMO
The CSS Change:
.lightboxbg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
vertical-align: middle;
text-align: center;
display: table;
}
.wrapper {
vertical-align: middle;
line-height: 100%;
height: 100%;
width: 100%;
display: table-cell;
}
Hope this helps.
Have a look at this idea. It may suit you: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
.Center-Container {
position: relative;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
In your case the wrapper needs the relative positioning, and the "center me" the absolute positioning.
Replace .centerme with following css:
CSS:
.centerme {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px; /* negative-half of element's width*/
margin-top: -50px; /* negative-half of element's height*/
}
Here is a DEMO and here is a full page RESULT.
UPDATE
To center div for variable length is simple, just remove height, width, margin-left, margin-top reference from .centerme css.
.centerme {
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
}
Here is a UPDATED DEMO.
Related
Here is my jfiddle - fiddle, everything is perfect here but only the probelm is when you minimise the window the image goes down , need to fit that image in vertically center which is not happening now
HTML:
<div class="left_panel">
<div class="slide-frame">
<img src="http://www.w3schools.com/bootstrap/paris.jpg">
</div>
</div>
CSS:
.left_panel {
border: 1px solid #ddd;
border-collapse: collapse;
bottom: 0;
left: 0;
position: absolute;
right: 300px;
top: 0;
background:#ddd;
}
.left_panel .slide-frame::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.left_panel .slide-frame{
height: 100%;
text-align: center;
width: 100%;
}
.left_panel .slide-frame img {
display: inline-block;
height: auto;
max-height: 100%;
max-width: 100%;
vertical-align: middle;
width: auto;
}
The reason for this behaviour is, that the :after element is an inline element. That causes a little gap between the image and that element. With setting the fon-size to zero, you remove that gap:
.left_panel {
font-size: 0;
}
Good article about that topic on CSS-Tricks. This solution is preferable, because you aren't using text. With text, there are other approaches to remove the space between inline elements.
Please check this for vertical and horizontal div without using height. https://jsfiddle.net/hardyrajput/myuqm5x8/2/
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 50%;
padding: 20px;
color: white;
text-align: center;
}
use this
.left_panel .slide-frame {
height: 100%;
text-align: center;
width: 100%;
display: inline-table;
}
just add display property
I would like to create a css class so a div can be placed in the center of its parent. The code I am using is:
.centered {
position: absolute;
margin: auto;
bottom: 0px;
left: 0px;
top: 0px;
right: 0px;
}
It works if the parent is larger than the child element, or has the same size:
https://jsfiddle.net/cy8dn1km/
But if the child is larger, then its center is not positioned at the center of its parent. Instead their left borders will be at the same place, and the child element will be extended only to right:
https://jsfiddle.net/797L7nce/
Something is wrong with the horizontal centering.
How is it possible to fix it using CSS only (without using CSS 2D/3D transformations), without adding new container elements?
Add left: 50%; transform: translate(-50%, 0);and remove right: 0px;
.centered {
position: absolute;
margin: auto;
display: block;
bottom: 0px;
top: 0px;
left: 50%;
transform: translate(-50%, 0);
}
Demo
Here is a solution without using CSS 2D/3D transformations. You can use display: flex with flex-direction: column (this is important) on parent element and display: table on child element.
body,
html {
width: 100%;
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: green;
}
.centered.d1 {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.d1 {
background: yellow;
width: 50px;
height: 50px;
}
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
display: table;
}
<div class="centered d1">
<div class="centered d2"></div>
</div>
If you know the dimentions of the elements you can use the left/top position at 50% with negative margins of half the element size.
I have updated your fiddle here: https://jsfiddle.net/797L7nce/2/
.centered {
position: absolute;
display: block;
left:50%;
top:50%;
}
.d1 {
background: yellow;
width: 50px;
height: 50px;
margin-left:-25px;
margin-top:-25px;
}
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
margin-left:-125px;
margin-top:-125px;
}
Ok i tried without 2D CSS :
Change absoluteto fixed and add some margin: auto;
JSfiddle here
body, html {
width: 100%;
height: 100%;
}
body {
position: relative;
background: green;
}
.centered {
position: fixed;
margin: auto;
display: block;
bottom: 0px;
left: 0px;
top: 0px;
right: 0px;
}
.d1 {
background: yellow;
width: 50px;
height: 50px;
}
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
}
<div class="centered d1">
<div class="centered d2">
</div>
</div>
You're almost there. Just set the absolute positions to the same (large) negative number, to make enough room for the auto margin:
.centered {
position: absolute;
margin: auto;
bottom: -9999px;
left: -9999px;
top: -9999px;
right: -9999px;
}
https://jsfiddle.net/797L7nce/9/
Adding the below CSS to .d2 will solve the issue.
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
position:absolute;
left:50%;
margin-left:-125px;
}
You can check the demo here
In Bootstrap 4:
to center the child horizontally, use bootstrap-4 class:
justify-content-center
to center the child vertically, use bootstrap-4 class:
align-items-center
but remember don't forget to use d-flex class with these
it's a bootstrap-4 utility class, like so
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
Note: make sure to add bootstrap-4 utilities if this code does not work
I know it's not the direct answer to this question but it may help someone
Is there some way to use position: absolute; with an element that's also display: table;?
In the example below I would imagine that the table would be 100% wide and (100% - 50px) high, but it's not. Instead, I'll have to wrap the table in an absolute positioned container and make it 100% wide and high. It feels stupidly redundant. Why doesn't absolute positioning a table work? Is there some way to make it work?
html, body {
min-height: 90%;
min-width: 90%;
height: 90%;
width: 90%;
}
body {
background-color: #333;
}
.table {
display: table;
border: 3px solid rebeccapurple;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 50px;
}
.cell {
display: table-cell;
height: 100%;
width: 33%;
border: 3px solid #f00;
}
.not-a-table {
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
background-color: rgba(0,200,0,.2);
}
<div class="table">
<div class="cell"> </div>
<div class="cell"> </div>
</div>
<div class="not-a-table"> </div>
Add width and height in .table
.table{
....
width: 100%;
height: calc(100% - 50px);
}
Elements with display:table property cannot be placed in absolute positioning without specifying width and height... Need to use display:block property.
i created a maze and i want to center an inside div
although i center it with margin: 0 auto; it won't work
(this div shows sad smily face when user enter the wall and lose)
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
display: none;
margin: 0 auto;
}
here is the fiddle link:
http://jsfiddle.net/uqcLn/28/
If you're going to use absolute positioning you need to do it like this:
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -225px;
display: none;
}
Edit: you also need to add position:relative; to the main div. Here is an updated fiddle.
http://jsfiddle.net/FragJ/2/
It looks off because you have other elements that aren't exactly centered.
EDIT: As I stated earlier, the smiley didn't look centered because your code is off. The maze really should be inside a div itself. However I was able to eyeball center it simply by playing with the margins.
http://jsfiddle.net/FragJ/4/
To achieve this you'll need to set your css like this:
#main {
position: relative;
width: 550px;
height: 550px;
float: left;
margin-left: 220px;
margin-top: 100px;
background: grey;
overflow: hidden;
}
#highlight_win {
width: 550px;
height: 550px;
position: absolute;
top: 50%;
left: 50%;
display: none;
margin: -180px 0 0 -180px;
}
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -180px;
display: none;
}
.outer {
height: 600px;
width: 500px;
background-color: black;
}
.inner {
height: 200px;
width: 200px;
margin: auto;
position: relative;
top: 200px;
background-color: red;
}
markup
<div class="outer">
<div class="inner">
</div>
</div>
The idea is for fixed sized block elements, setting
margin:auto;
fixes horizontal centering
for vertical central alignment the child's top = half the height of the parent - half the height of the child
I have the following setup
Html:
<div id="resizable">
<div id="fixHeightTop">Whatever</div>
<div id="problematicDiv">Whatever</div>
<div id="semiProblematicDiv">Whatever</div>
<div id="fixHeightBottom">Whatever</div>
</div>
Css:
#resizable {
position: relative;
}
#fixHeightTop {
position: relative;
height: 10px;
}
#fixHeightBottom {
position: absolute;
height: 10px;
}
#problematicDiv {
position: relative;
float: left;
width: 80%;
overflow: auto;
}
#semiProblematicDiv {
position: relative;
float: right;
width: 20%;
overflow: auto;
}
The #resizable div is resizable (jQuery). What I need to do is to give to problematicDiv and semiProblematicDiv a height equal to 100% - fixHeightTop height - fixHeightBottom height so I can extend it on the full height of the resizable element. The problem is that I can't figure out a way to do it. If I use height: 100% it overlaps the bottom element.
Any ideas how to do that?
If I understood you right, you want to have two div with a fixed height and the two other divs show take up the rest of the height. If this is what you want, here is a way to do it.
#resizable {
height: 80px; //this is changed by JQuery, right?
}
#fixHeightTop {
height: 20px;
}
#fixHeightBottom {
height: 20px;
}
#problematicDiv {
position: relative;
float: left;
width: 80%;
overflow: auto;
height: 100%; //this helps the div taking up the space
}
#semiProblematicDiv {
position: relative;
float: right;
width: 20%;
overflow: auto;
height: 100%; //this helps the div taking up the space
}
i have an idea, try to use position:absolute;
#problematicDiv {
position: absolute;
top: 0px;
left: 0px;
width: 80%;
height: 100%; // Now you can apply height 100%
overflow: auto;
}
#semiProblematicDiv {
position: absolute;
top: 0px;
right: 0px;
width: 20%;
height: 100%; // Now you can apply height 100%
overflow: auto;
}
Good luck