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
Related
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
This question already has answers here:
Center a DIV horizontally and vertically [duplicate]
(6 answers)
How to center an element horizontally and vertically
(27 answers)
Align div horizontally and vertically center to a page (responsive) [duplicate]
(3 answers)
Closed 3 years ago.
I'm trying to center all my content by using a div, but every time I use a center code my content completely goes askew.
I tried using this code
position: relative;
max-width: 100%;
height: auto;
top: 50%;
left: 50%;
But that causes my content to snap to the far right. I'm not sure what I'm doing wrong but it might have something to do with my class styles.
Here's a part of the code I'm using. I'm making a website for my class!
CSS:
.centercontent {
position:relative;
max-width: 100%;
height: auto;
top: 50%;
left: 50%;
}
.front {
position:absolute;
top: 50px;
left:800px;
z-index: 2;
}
HTML:
<div class="centercontent">
<img src="https://lh3.googleusercontent.com/LIWtQclJc-pb9mtmO09gkVW10DEksAG2ma3BFO5th7Wj68Odo3k4KV24jcxNi-jY8l3ZFBfExvXQqgdTIhYVwbPNKB3kR-7cup4U_T6GOOiW0N2ahd70Fc-JF4tI2sUKHtAvyzwvvg=w2400" class="front" />
</div>
I think using Z-index is causing the code to act wonky, but I have to use the Z-Index to align all the pieces in my total code. If it's not the Z-Index, then I have no idea what could be wrong.
My end goal is to have the content be centered no matter what size computer its being viewed on. I want the images to be the same scale not matter how big the computer is and if the computer is smaller, have the images be smaller. And no matter what, it'll stay centered on the screen.
Any help is greatly appreciated!
there is a lot of way to center things in css.
you can see some tips and explication here : tips to center
z-index dont causing align bug :)
For you exemple, just add a transform: translate(-50%, -50%) to your container.
You can see your code with the modification just below
.centercontent{
position:absolute;
max-width: 100%;
height: auto;
top: 50%;
left: 50%;
border:2px solid tomato;
transform: translate(-50%, -50%);
}
<!Doctype html>
<html>
<head>
</head>
<body>
<div class="centercontent">
<img src="https://lh3.googleusercontent.com/LIWtQclJc-pb9mtmO09gkVW10DEksAG2ma3BFO5th7Wj68Odo3k4KV24jcxNi-jY8l3ZFBfExvXQqgdTIhYVwbPNKB3kR-7cup4U_T6GOOiW0N2ahd70Fc-JF4tI2sUKHtAvyzwvvg=w2400" class="front" >
</div>
</body>
</html>
You need to give style to your main div, which is "centercontent" and remove additional styling from your image. So, your whole code will look like this.
<!Doctype html>
<html>
<head>
<style>
.centercontent {
text-align: center;
position: relative;
max-width: 100%;
}
.front {
z-index: 2;
}
</style>
</head>
<body>
<div class="centercontent">
<img src="https://lh3.googleusercontent.com/LIWtQclJc-pb9mtmO09gkVW10DEksAG2ma3BFO5th7Wj68Odo3k4KV24jcxNi-jY8l3ZFBfExvXQqgdTIhYVwbPNKB3kR-7cup4U_T6GOOiW0N2ahd70Fc-JF4tI2sUKHtAvyzwvvg=w2400" class="front" >
</div>
</body>
</html>
To center the container on any screen size you can use the following code.
.centercontent{
margin: 0 auto;
width:50%; // You can put any width to the container.
}
What you've done is almost correct. But you've got muddled with your attempt to horizontally align objects.
The easiest way to horizontally align on a block level element:
text-align: center;
To vertically align:
position: relative;
top: 50%;
transform: translateY(-50%);
Here's a working example: https://jsfiddle.net/yorjk2h7/
.centercontent{
position:relative;
width: 100%;
height: auto;
display: block;
text-align: center;
}
.front {
max-width: 100%;
z-index:2
}
hope this is what you need
try this code in your css
.centercontent {
max-width: 100%;
height: auto;
}
.front {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
}
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
I want to center a div in the absolute center of the page with justify-content: center and align-items: center but the div needs to be the 100% width and height of the page to be in the absolute center.
The problem arrives when you add elements on top or at the bottom of the div, this reduces the height of the div that we want to center and is no longer at the absolute center.
Here is the page https://jsfiddle.net/nybf8tjc/1
I could just add
.typewriter{margin-top: -41px;}
to fix this but I feel like there is must be a better way to do this.
You can make .typewriter an absolutely positioned element and add the usual settings for centering that, like
.typewriter {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
etc.
}
In action: https://jsfiddle.net/de3rf65j/
You can simple achieve it by using this.
div.father {
width: 100vw;
height: 100vw;
position: absolute;
display: flex;
align-items: center;
justify-content: space-around;
}
div.father div.child {
width: 400px;
height: 250px;
background-color: teal;
position: relative;
}
<div class="father">
<div class="child"></div>
</div>
Also you can use the transform property:
div.child {
width: 400px;
height: 250px;
margin:0;
padding: 0;
background-color: teal;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
That should center the container you want to.
Take a look https://css-tricks.com/snippets/css/a-guide-to-flexbox/
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