This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 3 years ago.
I am trying to center the disc in the middle of the page overlapping my left and right div. The way I have found to do it is using the below code however, the disc shoots off the page to the right when I do. Please can someone help me understand why as I have googled and watched YouTube videos and they say this is how you do it. It is even working in the YouTube video but not for me. I am really stuck.
body {
margin: 0;
}
.container {
height: 100vh;
display: flex;
}
.left {
width: 50vw;
display: relative;
background-color: #abc;
}
.right {
width: 50vw;
background-color: #687;
}
.disc {
width: 16em;
height: 16em;
border-radius: 50%;
background-color: black;
position: absolute;
top: 50%;
right: -8em;
transform: translateY(-50%);
}
<div class="container">
<div class="left">
<div class="disc"></div>
</div>
<div class="right"></div>
</div>
If I understood correctly you want to position the disc in the middle horizontaly.
If that's the case, you can use the right property in conjunction with the CSS calc function to get the desired behavior, like this:
...
.disc {
...
right: calc(50vw - 8em);
...
}
...
Where vw stands for viewport width and 8em is half of the disc width.
You can see the complete code here.
To position a child element, the parent element need to have a position attribute (position: relative; atleast) for its childs to inherit. That is why your .disc element went off to the right.
So simply add
position: relative;
to the parent elements, the .left and .right class
I hope this helps
Related
This question already has answers here:
Element will not stay centered, especially when re-sizing screen
(2 answers)
Closed 5 years ago.
I have a quiet simple html structure but I can't figure out what I have to do to place the 8 on top of the 0 without losing the height of the wrapping div.
If I use for example float or absolute position on both spans, the divs height is reduced to 0. If I use a combination of absolute position and float on the second div, I cant manage to properly center the span horizontally in the container.
I hope you can tell me what I'm doing wrong and how I can move the second span on top of the first one while letting the first span determine the height of the wrapping div.
#wrapper {
position: relative;
width: 100%;
text-align: center;
}
#first {
}
#first {
}
<div id="wrapper">
<span id="first">0</span>
<span id="second">8</span>
</div>
You can center absolutely-positioned elements by using a combination of left: 50% and a negative transform, which will allow you to center the 8 element above the 0:
#wrapper {
position: relative;
width: 100%;
height: auto;
text-align: center;
}
#first, #second {
color: white;
display: block;
}
#first {
background: blue;
height: 50px;
padding: 30px
}
#second {
background: red;
height: 10px;
padding: 10px;
position: absolute;
top: 0;
left:50%;
transform: translateX(-50%);
}
<div id="wrapper">
<span id="first">0</span>
<span id="second">8</span>
</div>
This question already has answers here:
Positioning <div> element at center of screen
(14 answers)
Closed 7 years ago.
I found a jquery code that rotate images inside a div and I want to position this div to the center of the page. I have this CSS for the images
#rotating-item-wrapper {
position: relative;
}
and this for the div
.rotating-item {
display: none;
position: absolute;
top: 150px;
left: 200;
}
How I manage to center the whole process to the center?
using margin and position tend to work in these sorts of situations:
HTML:
<div id="center-div"></div>
CSS:
#center-div {
position: relative;
margin: 0 auto;
width: 50px;
height: 50px;
background: red;
}
here's a jsfiddle: http://jsfiddle.net/mwyLz9rt/
Add this code to the div you wish to center:
.centered {
position: absolute;
margin-left: 50vw;
margin-top: 50vh;
transform: translate(-50%, -50%);
}
Also, next time try to provide us with a jsfiddle example so we could understand the problem more vividly :)
Here's a demo of the above code JSFIDDLE
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.
I am new to CSS. I want to keep the div always at the center of the screen. I know by positioning we can achieve it but that is only when we have fixed width and height. What my requirement is, I want to have a div with fixed width but no fixed height. I want it to get adjusted to the center based on the content inside it using CSS.
You are looking for transform: translateY(-50%) property. Here is an example:
.main {
width: 200px;
position: fixed;
background-color: red;
position: fixed;
top: 50%;
left: 0px;
right: 0px;
transform: translateY(-50%);
margin: auto;
}
Working Fiddle
Just do something like this and you can be sure that it will always be in the middle.
HTML
<div id="outer">
<div id="content"></div>
</div>
CSS
* {
margin: 0 auto; /* centers everything except if otherwise floated
or affected by positioning positioning and margin property values */
}
#outer {
width: 200px;
height: auto;
}
#content {
width: 200px;
height: 100%;
position: absolute;
background-color: green;
bottom: 0;
}
See working example here
Solution: Wrapped the DIV in question in a none floated div that listen to the first block of CSS code and I didn't do anything that will affect its position.
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Closed 8 years ago.
I'm currently trying to center an image inside a div that has it's dimensions set with vh. I tried using the display:table-cell; method which centered the image but began messing with the vw of other elements. I was wondering if there was another simpler way to be vertically centering this image inside a div that as vh. I know this might be a little confusing so hopefully my code down below can help!
Html:
<div class="graphic" style="background-color:#ff837b">
<img src="images/WAInduo-02.svg" style="width: 100%; height: 50%;" />
</div>
CSS:
#induoIntro .graphic {
display:block;
height:100vh;
}
It seems that vertical-align:middle has some inconsistency with vw unit. Try positioning approach.
Here is the solution for you.
CSS code:
.graphic {
display: block;
height: 100vh;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.graphic img {
vertical-align: middle;
width: 100%;
display: inline-block;
height: 50%;
position: absolute;
top: 0;
bottom: 0%;
margin: auto;
}
Here is the working fiddle
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
Is there a way to CENTER A DIV vertically and horizontally but, and that is important, that the content will not be cut when the window is smaller than the content The div must have a background color and a width and hight.
I have always centered divs with the absolute positioning and negative margins like in the example provided. But it has the problem that it cuts the content on top. Is there a method to center the div .content without this problem?
I have the example here to play: http://jsbin.com/iquviq/1/edit
CSS:
body { margin: 0px; }
.background {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: yellow;
}
/*
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?:
*/
.content {
width: 200px;
height: 600px;
background-color: blue;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;/* half width*/
margin-top:-300px;/* half height*/
}
HTML:
<div class="background">
<div class="content"> some text </div>
</div>
My question is not duplicate of "How to center an element horizontally and vertically? " 1- My question was asked before. (just check dates). 2- My question ask very clearly and in black as condition: "the content will not be cut when the window is smaller than the content"
For modern browsers
When you have that luxury. There's flexbox too, but that's not broadly supported at the time of this writing.
HTML:
<div class="content">This works with any content</div>
CSS:
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Tinker with it further on Codepen or on JSBin
For older browser support, look elsewhere in this thread.
After trying a lot of things I find a way that works. I share it here if it is useful to anyone. You can see it here working: http://jsbin.com/iquviq/30/edit
.content {
width: 200px;
height: 600px;
background-color: blue;
position: absolute; /*Can also be `fixed`*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
max-width: 100%;
max-height: 100%;
overflow: auto;
}
Here's a demo:
http://www.w3.org/Style/Examples/007/center-example
A method (JSFiddle example)
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
#content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
HTML:
<div id="content">
Content goes here
</div>
Another method
(JSFiddle example)
CSS
body, html, #wrapper {
width: 100%;
height: 100%
}
#wrapper {
display: table
}
#main {
display: table-cell;
vertical-align: middle;
text-align:center
}
HTML
<div id="wrapper">
<div id="main">
Content goes here
</div>
</div>
The legitimate way to do that irrespective of size of the div for any browser size is :
div{
margin:auto;
height: 200px;
width: 200px;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:red;
}
Live Code
You can compare different methods very well explained on this page: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
The method they recommend is adding a empty floating element before the content you cant centered, and clearing it. It doesn't have the downside you mentioned.
I forked your JSBin to apply it : http://jsbin.com/iquviq/7/edit
HTML
<div id="floater">
</div>
<div id="content">
Content here
</div>
CSS
#floater {
float: left;
height: 50%;
margin-bottom: -300px;
}
#content {
clear: both;
width: 200px;
height: 600px;
position: relative;
margin: auto;
}
I do not believe there is a way to do this strictly with CSS. The reason is your "important" qualifier to the question: forcing the parent element to expand with the contents of its child.
My guess is that you will have to use some bits of JavaScript to find the height of the child, and make adjustments.
So, with this HTML:
<div class="parentElement">
<div class="childElement">
...Some Contents...
</div>
</div>
This CSS:
.parentElement {
position:relative;
width:960px;
}
.childElement {
position:absolute;
top:50%;
left:50%;
}
This jQuery might be useful:
$('.childElement').each(function(){
// determine the real dimensions of the element: http://api.jquery.com/outerWidth/
var x = $(this).outerWidth();
var y = $(this).outerHeight();
// adjust parent dimensions to fit child
if($(this).parent().height() < y) {
$(this).parent().css({height: y + 'px'});
}
// offset the child element using negative margins to "center" in both axes
$(this).css({marginTop: 0-(y/2)+'px', marginLeft: 0-(x/2)+'px'});
});
Remember to load the jQ properly, either in the body below the affected elements, or in the head inside of $(document).ready(...).