I want to make the element which has id "all" centered on the overall website. Is there something wrong in my code? It does not work properly
#all{
position: absolute;
width: 55%;
margin: 0 auto;
top: 150px;
display: flex;
justify-content: center;
align-items: center;
background-color: #EEEEEE;
box-shadow: 5px 5px 5px #808080;
}
Use left: 50%; transform: translateX(-50%); to center an absolutely positioned element horizontally.
#all{
position: absolute;
width: 55%;
top: 150px;
display: flex;
justify-content: center;
align-items: center;
background-color: #EEEEEE;
box-shadow: 5px 5px 5px #808080;
left: 50%;
transform: translateX(-50%);
}
<div id="all">all</div>
Try to code like below
#all{
position: absolute;
width: 55%;
top: 150px;
left: 50%;
margin-left:-27.5%;
background-color: #EEEEEE;
box-shadow: 5px 5px 5px #808080;
}
I would use it with 2d translate to vertical align it in all screen sizes, as this:
.myClass {
position:fixed;
width: 55%; // or what ever fixed or precentage value
top: 50%;
left: 50%;
// height: 150px; // if height is known
// margin-top: -75px; // if height is known - minus half the height
transform: translate(-50%, -50%); // if height is unknown
}
Related
I am trying to create a popup card, but the card isn't getting vertically aligned. I've used the position: absolute; for positioning but the card is showing down at the bottom.
CSS(SASS)
.popup {
height: 100vw;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba($color-black, 0.8);
z-index: 3000;
&__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
height: 50%;
background-color: $color-white;
box-shadow: 0 2rem 4rem rgba($color-black, 0.2);
border-radius: 3px;
display: table;
overflow: hidden;
}
Popup is not fully implemented, I was checking where the element would show up.
This code is showing a white box down at the bottom instead of middle. Where I was hoping it to be.
HTML
<div class="popup">
<div class="popup__content">
</div>
</div>
The popup class is direct child of body just so it isn't influenced by any other classes. Anyone see where I might screwed up.
try this:
.popup {
height: 100vw;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba($color-black, 0.8);
z-index: 3000;
display:flex;
justify-content:center;
align-items:center;
&__content {
transform: translate(-50%, -50%);
width: 75%;
height: 50%;
background-color: $color-white;
box-shadow: 0 2rem 4rem rgba($color-black, 0.2);
border-radius: 3px;
display: table;
overflow: hidden;
}
Try using display: flex with justify-content, align-items rather than position: fixed.
It will be a constructive choice for a comfortable future in the future.
Please refer to the following URL through Google Translator. This site is well detailed.
https://heropy.blog/2018/11/24/css-flexible-box/
MDN: https://developer.mozilla.org/ko/docs/Web/CSS/flex
Use position: fixed; also for the child container (&__content). position: absolute; relates to he next higher ancestor with position: relative, so that night not be appropriate in every situation.
.popup {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: red;
z-index: 3000;
}
.popup__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: white;
box-shadow: 0 2rem 4rem green;
border-radius: 3px;
}
<div class="popup">
<div class="popup__content">
</div>
</div>
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 5 years ago.
I have the following HTML code:
p.error {
color: red;
padding: 5%;
margin-left: 20%;
margin-right: 20%;
font-size: 300%;
height: 100%;
box-shadow: 3px 3px 20px 3px #545454;
text-align: center;
background-color: #f1f1f1;
}
div.alert {
padding-top: 50%;
}
<div class="alert">
<p class="error">Error: Permission denied!</p>
</div>
Which my browser (Google Chrome Version 57.0.2987.133) compiles to this:
I finally got it to vertically center the div by using:
div.alert{
padding-top: 22.5%;
}
By further testing, I noticed that the browser uses the width instead of the height for padding-top.
My question: Why does the browser compile the HTML-code like this and how can I get it to vertically center the div by using 50%?
Padding-top percent is referring to the width of the element. It is part of the W3 CSS Box model specifications:
http://www.w3.org/TR/CSS2/box.html#padding-properties
You will not be able to reference height with padding percentages. It will always refer to width.
For centering, I'd recommend you refer to this CSS-Tricks article:
https://css-tricks.com/centering-css-complete-guide/
I have used this, however I have skipped out the parent element part because the parent is the body:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.alert {
position: absolute;
top: 50%;
transform: translateY(-50%);
/* for Safari */
-webkit-transform: translateY(-50%);
}
p.error{
color: red;
padding: 5%;
margin-left: 20%;
margin-right: 20%;
font-size: 300%;
box-shadow: 3px 3px 20px 3px #545454;
text-align: center;
background-color: #f1f1f1;
height: 100%;
}
<div class="alert">
<p class="error">Error: Permission denied!</p>
</div>
NOTE: I have only vertically centered the element, not horizontally too.
To vertically center, you want to use an absolute position with top: 50%; left: 50%; transform: translate(-50%,-50%); to put it in the dead center.
p.error {
color: red;
padding: 5%;
margin-left: 20%;
margin-right: 20%;
font-size: 300%;
height: 100%;
box-shadow: 3px 3px 20px 3px #545454;
text-align: center;
background-color: #f1f1f1;
}
div.alert {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="alert">
<p class="error">Error: Permission denied!</p>
</div>
You can also use display: flex; justify-content: center; align-items: center; on the parent to center a child in the dead center.
body {
margin: 0;
}
p.error {
color: red;
padding: 5%;
margin-left: 20%;
margin-right: 20%;
font-size: 300%;
height: 100%;
box-shadow: 3px 3px 20px 3px #545454;
text-align: center;
background-color: #f1f1f1;
}
div.alert {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="alert">
<p class="error">Error: Permission denied!</p>
</div>
I'm trying to center this popup but I can't seem to get it to work properly on smaller screens like iphone. It looks okay on desktop/laptop screens. Can anyone suggest any ideas how to use media queries to get it the popup to be centered properly regardless of screen size? thanks.
<style type="text/css">
#popup {
display: none;
background: #FFF;
border: 5px solid #444;
padding: 0 15px 15px 15px;
position: fixed;
top: 20%;
left:35%;
width: 25%;
min-width: 210px;
z-index: 100000;
box-shadow: 0 0 10px #000;
border-radius: 5px;
text-align: center;
}
#popup-overlay {
display: none;
background: #000;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
</style>
The easiest way to do this is to use a transform to centre the element. This will work no matter the width / height of the element
html, body {
height: 100%;
margin: 0;
}
#popup {
/*display: none;*/
background: #FFF;
border: 5px solid #444;
padding: 15px;
position: fixed;
width: 25%;
min-width: 210px;
z-index: 100000;
box-shadow: 0 0 10px #000;
border-radius: 5px;
text-align: center;
top: 50%;
left:50%;
transform: translate(-50%, -50%)
}
#popup-overlay {
/*display: none;*/
background: #000;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
<div id="popup-overlay"></div>
<div id="popup">Look at me!</div>
Can you try this,
#popup {
display: none;
background: #FFF;
border: 5px solid #444;
padding: 0 15px 15px 15px;
position: fixed;
top: 20%;
left: 50%;
width: 25%;
margin-left: -25%;
min-width: 210px;
z-index: 100000;
box-shadow: 0 0 10px #000;
border-radius: 5px;
text-align: center;
box-sizing: border-box;
}
Note:
It is better to add some jsfiddle like url instead of providing partial details make easy to understand and workout.
left:50%;
margin-left:-120px;
(210 / 2) + 15 = 120
I would move the object to the center and then to the right the half of its size.
As the object width is not fixed, use transform to do that:
#popup {
...
left:50%;
transform: translate(-50%);
...
}
Despite transform is not available in IE8 and below, may be a good solution.
http://jsfiddle.net/fvLtd068/
For html5 enabled browsers use:
#popup {
background: #FFF;
border: 5px solid #444;
padding: 0 15px 15px 15px;
position: fixed;
/* top: 20%; */ //Remove
/* left: 35%; */ //Remove
/* width: 25%; */ //Remove
left: 50%; // Insert
top: 50%; // Insert
transform: translate3d(-50%, -50%, 0); // Insert
min-width: 210px;
z-index: 100000;
box-shadow: 0 0 10px #000;
border-radius: 5px;
text-align: center;
}
So i've got a modal div (set with z-index) that I'm trying to center vertically. The thing is I use it for not only one content but several ones, so the height is not fix. And while having a general "fix" (I'll explain in just after) of -150px in the margin-top generally works for short content, when having a lot of content, the div will start at mid-page and finish at the end (which is not what I want at all). Here is my code :
.modal
{
padding: 10px;
border: 1px black solid;
width: 80%;
position: absolute;
background: white;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -40%;
z-index: 1000;
border-radius: 5px;
max-height: 80%;
overflow: scroll;
}
So here you can see the "fix". It works kind of well when the content is short :
It's pretty ugly when the content is big :
Does anyone have an idea of how to fix that ?
Thank you in advance
You could use this. Top 50% position the div on the 50% of the container y translate -50% is referred to his height and no the container:
.modal {
padding: 10px;
border: 1px black solid;
width: 80%;
position: absolute;
background: white;
left: 50%;
margin-left: -40%;
z-index: 1000;
border-radius: 5px;
max-height: 80%;
overflow: scroll;
top: 50%;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
FIDDLE
Add the following css to center the div. note that this only works on position:absolute elements.
top: 0;
bottom:0;
margin-top: auto;
margin-bottom: auto;
So your css will become:
.modal
{
padding: 10px;
border: 1px black solid;
width: 80%;
position: absolute;
background: white;
left: 50%;
top: 0;
bottom:0;
margin-top: auto;
margin-bottom: auto;
margin-left: -40%;
z-index: 1000;
border-radius: 5px;
max-height: 80%;
overflow: scroll;
}
.modal{
padding: 10px;
border: 1px black solid;
width: 80%;
background: white;
z-index: 1000;
border-radius: 5px;
max-height: 80%;
overflow: scroll;
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
margin: auto;
}
I have a relatively div positioned on top of a fixed position div and I would like to vertically align this first div. Is there a way to do this? This is my current markup:
<div class="overlay">
<div id="dialogInvoice">
content
</div>
</div>
The CSS:
.overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 10;
}
#dialogInvoice {
width: 390px;
height: 722px;
margin: 0 auto;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: relative;
}
Any suggestions on this? I did try the line-height method but this is apparently only working when using mere text.
If your element does not have a fixed width or height then you can't use the other solutions without using javascript to calculate the values.
Here is an alternative.
#dialogInvoice {
width: 390px;
height: 722px;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
what you need to add to your css of #dialogInvoice is
top: 50%;
and change the margin to
margin: 361px auto;
(361 is 722 / 2)
it will first push your container half way down the page and then push it back up the required value, which is exactly half of its height (361px)
here is a jsfiddle for better understanding.
This CSS may do what you require:
.overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 10;
}
#dialogInvoice {
margin: 0 auto;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: absolute;
top: 100px;
bottom:100px;
left:100px;
right:100px;
}