I'm centering a DIV using translate
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
It does puts it in the middle, however with too much margin to each side. Meaning, that although it is in the middle, never does it go to the edges of the browser window, when the window is resized.
div {
text-align: center;
font-size: 80pt;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
border: 1px solid grey;
}
<div>Look at me, I'm centered, with too much margin.</div>
http://codepen.io/anon/pen/LbQxLV
This is how text wrapping works. When you put the div to left 50% of the page, max width it can obtain is from that starting point at 50% left of screen to right edge of the page, i.e. 50% only. Which is you view is getting.
Thus when using translate for centering a div, you must specify the width if you want to fill it the parent.
So ,just specify the width for your element!
add this code:
div{
width: 100%;
max-width: 90%;
}
change as per your need!
Related
I am having problems getting the grasp of position: absolute
I understand that it positions itself according to the position of its relative parent. So what is wrong with my example? when clicking on the first ".col-lg-6", why is the faded blue line not centered on the right col?
Please could you rework the code and explain why this is happening?
.formWrapper
{
background: blue;
height: 100vh;
position: relative;
margin: 0;
}
.formWrapper .contactForm
{
width: 750px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: yellow;
}
<div class="formWrapper">
<div class="contactForm row">
<div class="col-lg-6"><h1>HI</h1></div>
<div class="col-lg-6"><h1>HI</h1></div>
</div>
</div>
I can't rework the code and give you what you want exactly, because I don't see the faded blue line you're talking about. But, I will explain what is going on with your code, as I see it.
HTML Markup
<div class="formWrapper">
<div class="contactForm row">
<div class="col-lg-6"><h1>HI</h1></div>
<div class="col-lg-6"><h1>HI</h1></div>
</div>
</div>
.formWrapper
{
background: blue;
height: 100vh;
position: relative;
margin: 0;
}
You have a .formWrapper div colored blue. It takes up the full screen, and you've positioned it relative. Positioning it relative provides an anchor for its child element to use when defining its own position as absolute (necessary).
.formWrapper .contactForm
{
width: 750px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: yellow;
}
You've defined the a fixed width and height of the yellow .contactForm div and colored it yellow.
By defining position: absolute, with top:50% and left:50%, the top left position of the .contactForm div would appear in the very middle of the .formWrapper div. However, you've also added the transform: translate(-50%, -50%) style, which moves the .contactForm div to the left 50% of its own width and up 50% of its own height.
Important
The position: absolute style that you've set in the parent of the div.col-lg-6 elements does not affect the children's positioning within that element. Position absolute only directly affects the actual element to which you've applied this style, changing its position in reference to its own parent, or the closest parent that has a position style defined.
Position Fixed
If your goal is to have a pop up that sits in the center of the screen, then you might want to use position: fixed, which positions the element relative to the window. This way you don't have to worry about the effects of other elements.
You could position the popup in the middle of the view the same way you positioned the .contactForm div in the middle of the its parent div.
Bootstrap
If you are using bootstrap or any other css framework, you may want to consult their documentation on how to accomplish your goals. Frequently, when using a css framework, adding your own custom styles that affect the sizes and positioning of elements can have consequences that are difficult to manage.
By setting a position of absolute or fixed, you might break the expected flow of the rest of the css. So, only do it when there is no standard way of doing what you need and you know the consequences.
I want to learn to work with percentages in CSS instead of exact units, which led me to this centering technique:
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
I know that with absolute positioned elements, the top, bottom, right, and left properties set space between an element and the edge of its ancestor or father if there's one. In the technique they put the element 50% below and 50% to the left which is logical if the intention is to center horizontally and vertically the element, but why include the transform property that is used to rotate, scale, and move elements with negative values?
Here's my code:
.container {
height: 700px;
display: block;
width: 100%;
height: 700px;
text-align: center;
overflow: hidden;
}
.container img{
background-size: cover;
}
.container > h1 {
font-size: 72px;
position: absolute;
color: white;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<h1>Enjoy This Magical Experience</h1>
<img src="https://static.tumblr.com/737181aea20b4523b6fce168a29fe06b/nwsqmvx/cIhmrn4un/tumblr_static_bigstock_silhouettes_of_concert_crowd_i_1565261621.jpg"/>
</div>
top/left
top moves top border of your element x units from top border of container (or element we are placing out element relative to).
left moves left border of your element x units from left border of container (or element we are placing out element relative to).
Percentage in both of them is calculated from container.
Basically top: 50%; left: 50% puts your element's top-left corner in the center of container.
translate
translate(X/Y) moves your element by x units from it's current position.
In this case percentage is calculated from the element itself.
translate(-50%, -50%) moves your element by half of its width and half of its height back (root 0,0 point is in top-left corner and numbers are increasing into visible area).
I have an slider, which include navigation dots positioned by absolute value. And I want to know how to center those dots by X axis.
Im fine when it's set right: 10%; at the desktop layout.
But mobile have an esthetic issues when the values in %, it just never looks right in the center because of small width.
I have searched a lot, and most popular solution was
left: 50%;
right: 50% transform: translateX(50%);
But still it works just as left.. Please have an look on jsfiddle code below, I need space between 2nd and 3rd white dot to be cut by white vertical line.
https://jsfiddle.net/dpmango/vk9oc6gt/2/
Thank you for helping in advance!
https://jsfiddle.net/vk9oc6gt/3/
transform:translateX(-50%); is what you're looking for.
Notice when you apply transform:translateX(-50%); it shifts the element by a percentage of the element's dimensions, in this case the width because it's an X axis translate, 50% because we specified it and to the left because it's a negative value.
I added it in both the middle dots div and the middle white line:
.center-line {
position: absolute;
background-color: white;
top: 0;
left: 50%;
transform:translateX(-50%);
width: 2px;
height: 100%;
}
.owl-dots {
display: inline-block;
position: absolute;
top: 80px;
left:50%;
transform:translateX(-50%);
}
If you need vertically centered dots too, you can go with this https://jsfiddle.net/vk9oc6gt/4/ using:
top:50%;
left:50%;
transform:translate(-50%, -50%);
why dont u use this? - .owl-dots{width: 100%, text-align:center; left:0;}
I have a div which has its CSS initially defined as:
.mydiv {
position: absolute;
top: 60px;
left: 60px;
right: 60px;
bottom: 60px;
background-color: cyan;
overflow: hidden;
}
That is with equal distance from screen borders and I wanted to make it draggable via jQuery. This wouldn't work because of the right and bottom CSS directives.
So my next idea was to use this CSS definition:
.mydiv {
position: absolute;
width: 90%;
height: 90%;
margin-left: 5%;
margin-top: 5%;
background-color: cyan;
overflow: hidden;
}
Which according to my understanding would create a div with a width and height equal to 90% of the screen width/height and additionally the margin directives (5% on each side) would position it in the center of the screen.
This solution doesn't seem to work for 100%.
It works horizontally, the div is centered horizontally BUT vertically the space in the bottom is less than the space on top. Which is not what I want it to be.
I know I could use calc() to solve it in a different way but I want to avoid it due to browser compatibility (IE8).
I was wondering what I'm doing wrong?
i'm kind of stupid today.
i removed the margins and used:
top: 5%;
left: 5%;
and it solved my problem.
Okay i'm trying to center some content, but, I want to keep the absolute attribute to keep the content within a certain height on the page, but at the same time, i want the content perfectly centered. How do I center it if absolute takes specific coordinates? Everyone has different sized monitors so giving the coordinates to center it will fail.
#logo {
position: absolute;
top: 25px;
left: 0px;
}
#logo {
position: absolute;
top: 25px;
width: 100px;
left: 50%;
margin-left:-50px;
}
Make the left position 50% and then give it a negative margin to pull it back by half the width.
Demo