I have an element positioned absolute with margin 50px so after setting left 50% and transform translate (-50%) element is not center because of margin.
Is there an option center element horizontally and keep the margin 50px and transform translate (-50%)
I have a #mixin theme-btn with margin 50px
.btn{
#include theme-btn();
&--uslugi{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
}
Add a parent div to your div, for example:
HTML
<div class="box">
<div class="box-in">
</div>
</div>
and CSS
.box {
display: flex;
justify-content: center;
}
.box-in {
margin: 50px;
height: 100px;
width: 400px;
border: 1px solid green;
}
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed last year.
I would like to be able to position the gray container in the middle of the background, also vertically, but I can't understand how the percentages work, why the left one works and the top doesn't
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
body {
background-image: url("wallpaper.png");
background-size: cover;
background-repeat: no-repeat;
position: relative;
top: 0px;
}
.container {
background-color: lightgray;
opacity: 50%;
width: 200px;
height: 200px;
left: calc(50% - 100px);
top: calc(50% - 100px);
position: relative;
}
<body>
<div class="container">
<div class="container-name"></div>
<div class="container-stats"></div>
</div>
</body>
Here is the preview
You need to give the body a height, or else it'll be the elements height, that's why you can't move top or bottom, since the parent (body) is only 200px, since that's all there is. Where the parent doesn't have a height property, it'll automatically adjust to it's content height, 200px in this case. Also, the top property from body can be removed.
You could add height: 100vh; to your body, that'll be the 100%/units height of the view port.
The calc() function you have is taking 50% of it's parent size, then substracting 100px, which in your case is 50% of your element. That'll center the element with percentages.
An alternative to your centering solution could be:
.container {
background-color: lightgray;
opacity: 50%;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
position: relative;
transform: translate(-50%, -50%);
}
This will move your container 50% left of parents width, 50% from the top of parent and then, with transform: translate() move it -50% of it's own size X and Y
You need to give a height to body.
If parent div has a position relative then for setting div according to parent you should give a child div to position absolute.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
body {
background-image: url("wallpaper.png");
background-size: cover;
background-repeat: no-repeat;
position: relative;
top: 0px;
height: 100vh;
}
.container {
background-color: lightgray;
opacity: 50%;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="container-name"></div>
<div class="container-stats"></div>
</div>
HTML:
<div class="wrap-center">
<div class="container">
<div class="container-name"></div>
<div class="container-stats"></div>
</div>
</div>
CSS:
.container {
background-color: lightgray;
opacity: 50%;
width: 200px;
height: 200px;
}
.wrap-center {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 500px;
}
I have wrapper orange div that has known height, e.g. 200px.
I have bottom red div that has unknown height, e.g. textarea that can be resizable depending on text inside.
The rest space besides div is taken by a blue div, that has a scroll.
Well I want to place an absolute green div right above of the red div. I don't know its height. This div should have z-index more than the blue div, and be on its bottom.
Well:
I can't use bottom: Npx and place green div in the same container as the red div. since I don't know the size of red div and.
I can't use top: Npx and place in the same container as orange div, since the known height of 200px of wrapper (orange div) can be shrunken if device height is lesser than 200px.
I can't place it inside of blue div and make it bottom: 0, since it has a scroll.
.wrapper {
background-color: #ff8000;
height: 150px;
display: flex;
position: relative;
padding: 10px;
flex-direction: column;
}
.unkown-height-top {
background-color: #00ff00;
position: absolute;
width: calc(100% - 20px);
bottom: 40px; /* I don't know the size of bottom div here */
height: 50px; /* random*/
}
.unkown-height-bottom {
background-color: #ff0000;
height: 40px; /* random */
flex-shrink: 0;
}
.top-bellow {
flex-shrink: 1;
overflow-y: scroll;
background-color: blue;
}
<div class="wrapper">
<div class="top-bellow">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
<div class="unkown-height-top"></div>
<div class="unkown-height-bottom"></div>
</div>
You can place it inside the red div and use bottom:100%
.wrapper {
background-color: #ff8000;
height: 150px;
display: flex;
padding: 10px;
flex-direction: column;
}
.unkown-height-top {
background-color: #00ff00;
position: absolute;
width: 100%;
bottom: 100%;
height: 50px; /* random*/
}
.unkown-height-bottom {
background-color: #ff0000;
height: 40px; /* random */
flex-shrink: 0;
position: relative;
}
.top-bellow {
flex-shrink: 1;
overflow-y: scroll;
background-color: blue;
}
<div class="wrapper">
<div class="top-bellow">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
<div class="unkown-height-bottom">
<div class="unkown-height-top"></div>
</div>
</div>
I'm trying to make divs that are shaped like slices of a circle, using this code (this is for the top section of the circle) in CSS:
width: 0;
height: 0;
border-left: 250px solid transparent;
border-right: 250px solid transparent;
border-top: 250px solid #FFA8A8;
border-bottom: 250px solid transparent;
position: fixed;
border-radius: 100%;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
and that makes the divs show up the way I want them to on the page, but when I try to put any text into them, it doesn't show up. I think I get why (because the actual height and width of the div are 0 and what shows up on the page is just the border), but how would I make divs that look the same but can contain text or images?
instead border, use overflow to cut off round parts.
flex can also help with centering things
example:
body>div {
width: 80vmin;
height: 80vmin;
border-radius: 50%;
overflow: hidden;
display: flex;
flex-wrap: wrap;
counter-reset: divs;
}
div div {
background: #FFA8A8;
height: 40vmin;
width: 40vmin;
counter-increment: divs;
display: flex;
}
div div:nth-child(odd) {
background: gray;
order: 1
}
div div:last-child {
order: 2
}
div div:before {
content: counter(divs);
transform: rotate(45deg);
margin: auto;
font-size: 10vmin
}
html {
min-height: 100%;
display: flex;
}
body {
margin: auto;
transform: rotate(-45deg)
}
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
pen
Using the code you provided, and going off possibly incorrect assumptions, I have come up with some code that will work for you. You can add text inside the div using absolute positioning and the top and left values to get your text where you would like it.
Changes Made:
Added flex to the body to center the slice. Took out width, height, position, top, left, and margin. Reduced the border radius to 50% since that is all that is needed to create the rounded edge. Reduced the border by 100px purely so that the example slice was not so big.
body{
display:flex;
align-items: center;
justify-content:center;
}
.slice{
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-top: 150px solid #FFA8A8;
border-bottom: 150px solid transparent;
border-radius: 50%;
}
p{
position: absolute;
left:39%;;
top: 30px;
}
<div class="slice">
<p>Some Text That Fits</p>
</div>
I am trying to center the ajax loader. But no luck. Loader appears on right corner of the screen. Appreciate assistance. Below is the code
div.amshopby-overlay {
background-color: #fafafa;
height: 100%;
left: 0;
opacity: 0.5;
filter: alpha(opacity = 50);
position: absolute;
top: 0;
width: 100%;
z-index: 555;
}
div.amshopby-overlay img {
top: 100px;
left: 45%;
display: block;
position: absolute;
}
div.amshopby-overlay div {
margin: 0 auto;
display: block;
width: 300px;
height: 200px;
background: url('../images/amshopby-overlay.gif') 50% 50% no-repeat;
}
Try this css.
<div class="container">
<img src="loader.gif" class="loader">
</div>
CSS
.container{position:relative; height:300px;width:300px;}
.loader{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}
A solution I like to do when whatever I'm centering is just an image is to do it with the css background property:
HTML
<div id="container"></div>
CSS
#container.loader{
background:url('loader.gif') center center no-repeat;
}
Now in your javascript, add the class loader when you make the ajax request and remove the class on complete.
So I assume the div inside the amshopby-overlay contains your loader image. Give it a try:
div.amshopby-overlay div {
display: block;
width: 300px;
height: 200px;
background: url('../images/amshopby-overlay.gif') 50% 50% no-repeat;
/* Add this */
position: absolute;
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: 150px;
}
Basically, top and left will push the div 50% from top and left. And we will add -50% of the div width and height value to center in vertically and horizontally. Give it a try. Hope it helps.
"margin: auto" should give you the centering style you want. CSS details below.
HTML
<div class="container">
<img src="http://placehold.it/150x150" class="loader">
</div>
CSS
.container {
/*Absolute positioning will now be relative to this tag*/
position:relative;
/*Arbitrary Height*/
height:300px;
width:300px;
/*border to show container*/
border: 1px solid;
}
.loader {
/*Allow top, left, right, bottom
to be set relative to container*/
position: absolute;
/*Set edges of tag so margin auto knows the max boundry*/
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
/*Allows the use of margin auto*/
display: block;
/*Horizontally and vertically centered
(Display block will fill remaining margin space equally)*/
margin: auto;
}
jsfiddle
http://jsfiddle.net/16vrxgxh/1/
I have this simple HTML code, but make me frustrated because it can't center vertically :
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
and here's my CSS :
.outer {
position: relative;
height: 350px;
}
.inner {
position: absolute;
height: 100px;
top: 50%
}
the .inner div is really center vertically, but based on top side of it. because of top: 50%, what I want is this .inner div really centered vertically on top of .outer. how to do that?
You can center your element using css3 even if you don't know the dimensions.
.inner {
position: absolute;
height: 100px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Since you know the height of both elements you can set your top to top: 125px;
(350 - 100) / 2.
UPDATED WITH JQUERY
http://jsfiddle.net/yf0ncd7f/
Actually an easy way to center a absolute div is to use margin: auto;
section {
width: 100%;
height: 800px;
position: relative;
background: #eee;
}
div {
width: 500px;
height: 300px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: orange;
}
<section>
<div></div>
</section>
I added borders to differentiate clearly
Is this you want?
http://plnkr.co/edit/JRct1x95gnIUl8jITzG0?p=preview
.outer {
position: relative;
height: 150px;
border : 1px solid #f00;
}
.inner {
position: absolute;
height: 80px;
top:0;
bottom:0;
margin:auto;
border : 1px solid #0f0;
}
You could use this CSS trick to make the div vertically centered (and optionally horizontally as well). This works for a parent div of any height and width, as long as they are specified.
.inner {
position:absolute;
// The height and width of the element have to be set for this to work
height:100px;
width:100px;
// Setting the top and bottom to 0px as well as the margins to auto
// causes the div to be centered vertically.
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
// To also center the div horizontally, do the same for
// left, right and the margins.
left: 0px;
right: 0px;
margin-left:auto;
margin-right:auto;
}
Note that this solution only works when the height of the parent div is known beforehand and is specified. So the parent element needs to have height:100px or whatever amount of pixels you need it to be. Also the height can't be percentual, meaning that if the height of the parent div is declared as height:50%, this will NOT work.
The inner div can actually have a
You can set it by line-height property set it to the height of the div as in your code it should be line-height: 100px;
.outer {
position: relative;
height: 350px;
background: gray;
}
.inner {
position: absolute;
height: 100px;
line-height: 100px;
background: blue;
}
<div class="outer">
<div class="inner">
Hello World
</div>
</div>