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/
Related
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:
How to use safe center with flexbox?
(3 answers)
Flexbox align-items overflow text get cuts off at top [duplicate]
(2 answers)
Closed 4 years ago.
I have an element centered in the middle of a page. If the page shrinks to less than the height of the element, I need to still show the top of the element instead of being centered. I would like the element's container to be scrollable.
.card-display {
margin: auto;
top: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 400px;
background-color: grey;
border-radius: 10px;
}
<div class="card-display" >
<div>
always need top line visible (i.e., if there is enough container height to fit the grey element, it should be vertically centered, otherwise container have scrolling)
</div>
</div>
Check this if it's works for you :
Wrap card-display to apply Flex centered way.
jsfiddle
.container {
display:flex;
align-items: center;
justify-content: center;
position:absolute;
width: 100%;
height: 100%;
}
.card-display {
align-items:center;
position:absolute;
width: 300px;
height: 400px;
border-radius: 10px;
background-color: gray
}
#media screen and (max-height:400px) {
body {
background-color: blue;
}
.container {
align-items:baseline;
}
}
html:
<div class="container">
<div class="card-display">
<div>
always need top line visible
</div>
</div>
</div>
This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
Flexbox: center horizontally and vertically
(14 answers)
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 4 years ago.
I have a div (child) that is positioned absolute within a parent container (positioned relative). I want this child div to be centered vertically and horizontally within its container both on desktop and mobile, however the child div moves positioning depending on the size of the window. How do apply consistent centered positioning across devices?
HTML
<div class="container">
<div class="child">
</div>
<div class="child-2">
</div>
</div>
CSS
.container {
width: 300px;
height: 300px;
border: solid 1px blue;
position: relative;
}
.child {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
position: absolute;
right: 50%;
left: 50%;
top: 50%;
border-radius: 100%;
}
.child-2 {
border-bottom: solid 1px blue;
width: 300px;
height: 150px;
}
JSFiddle for example - http://jsfiddle.net/hfndkywe/8/
it is always safe to use transform to make the element center, see the following code
.child {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
left: 50%;
top: 50%;
border-radius: 100%;
transform: translate(-50%,-50%);
}
when you use left and right positioning, it is always pushing div from the sides not from the center, so in order to make exactly at center transform is the easy fix.
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 do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 8 years ago.
I have tried a couple of techniques, but so far nothing works to center text in an absolutely centered sphere. The size of the sphere is known, but not the length of the text. Here is an example that is lacking vertical alignment:
http://jsfiddle.net/eevw3oes/
css:
div
{
position: absolute;
border-radius: 50%;
top: 50px;
width: 100px;
height: 100px;
background: yellow;
overflow: hidden;
vertical-align: middle;
text-align: center;
}
Flexbox to the rescue: http://jsfiddle.net/eevw3oes/2/
div {
align-items: center;
display: flex;
…
}
This can also be accomplished by adding more DOM and using traditional css. I see you're trying to use vertical-align: middle, but that doesn't work on block elements (only with inline-block and table-cell).
Flexbox would work, and so will transforms:
<div class=circle style="left: 50px;">
<div class=text>
I'd like to be centered.
</div>
</div>
<div class=circle style="left: 200px;">
<div class=text>
I would like also like to be centerd. Even though I have long text. I would like to be centerd horizontally and vertically. Is that possible. Oh I wish it would work.
</div>
</div>
I've added inner <div> elements for the text. The CSS:
.circle {
position: absolute;
border-radius: 50%;
top: 50px;
width: 100px;
height: 100px;
background: yellow;
overflow: hidden;
padding: 20px;
}
div.text {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
text-align: center;
height: auto;
}
CodePen.
I think you could add line-height with the same value as width
line-height: 100px;
See this Fiddle
Someone had already a similar problem on Stackoverflow.