I'm trying to center an element with percent, but it don't work! Have I missed something or is the way I'm doing it impossible?
When I'm using this setting, the element is almost touching the top of the browser area.
.modal-box {
position: fixed;
z-index: 1000;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
}
Because everything is in %, you should just define width + height and top + left positions, not margin:
.modal-box {
height: 50%;
left: 25%;
position: fixed;
top: 25%;
width: 50%;
z-index: 1000;
}
JsFiddle: http://jsfiddle.net/ghorg12110/ob29nn2u/
html,
body {
width: 100%;
height: 100%;
}
.modal-box {
background-color: red;
height: 50%;
left: 25%;
position: fixed;
top: 25%;
width: 50%;
z-index: 1000;
}
<div class="modal-box"></div>
Instead of margins, use a transform. This will center the box regardless of height/width.
.modal-box {
position: fixed;
z-index: 1000;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
background: red;
transform: translate(-50%, -50%);
}
<div class="modal-box"></div>
If you want to center with percents, you will need to know the width of an element.
so say modal-box was 300px wide, you would do something like this:
.modal-box{
width:300px;
position:fixed;
left:50%;
margin-left: -150px; /*1/2 of your divs width*/
}
Why are you adding
margin-top: -25%;
margin-left: -25;
That negates the position: fixed of what you were trying to achieve. Remove those two lines and you will see how you can have your fixed position of the element.
If you want it relative to the viewport (irrespective of parent), then make use of the viewport-relative-lengths
.modal-box {
border: 1px solid #000;
position: fixed;
z-index: 1000;
width: 50vw; height: 50vh;
top: 50vh; left: 50vw;
margin-top: -25vh; margin-left: -25vw;
}
<div class="modal-box"></div>
Related
I want to make responsive image once the size becomes smaller it moves to bottom from the top right position. also I'm using material ui but can't find any help of it in this
.my-photo{
height: 300px;
position: absolute;
right: 50px;
top: 150px;
border-radius: 50%;
}
#media(max-width:800px){
.my-photo{
height: 250px;
position: absolute;
right:auto ;
top: 500px;
border-radius: 50%;
}
}
try using the bottom style:
.my-photo{
height: 300px;
position: absolute;
right: 50px;
top: 150px;
border-radius: 50%;
}
#media(max-width:800px){
.my-photo{
height: 250px;
right: auto;
bottom: 0;
}
}
plus try not to copy unnecessary styles in #media
This question already has answers here:
Center a position:fixed element
(23 answers)
Closed 5 years ago.
I am trying to center image with position fixed in CSS. The code I tried
<style>
.bgimg {
top: 50%;
left: 50%;
position: fixed;
opacity:0.09;
marging: auto;
}
</style>
Refer to https://www.w3schools.com/code/tryit.asp?filename=FJZQPD9BZUBG
For variable width/height content, you'll want to use a percentage offset with a transform, like this:
.bgimg {
top: 50%;
left: 50%;
position: fixed;
opacity:0.09;
transform: translate(-50%, -50%);
}
Or, if you know the width and height, you can avoid using a transform and set all the positions to 0 paired with margin: auto;:
.bgimg {
width: 400px;
height: 400px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
You can see both methods in action, below!
.bgimg {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: .5;
}
/* you need to set the width and height on this one, otherwise it stretches it to fill */
.center-something-without-transform {
width: 50px;
height: 50px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: blue;
}
<img class="bgimg" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg" />
<div class="centered-without-transform"></div>
I want to center absolute position div that has max-width.
#confirmation-popup {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 500px;
height: 150px;
padding: 12px;
background-color: #4e4e4e;
}
This does not work in IE.
max-width doesn't work in IE. better use width or you can use translate technique.
here is the snippet:
#confirmation-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
max-width: 500px;
height: 150px;
padding: 12px;
background-color: #4e4e4e;
}
<div id="confirmation-popup">this is demo</div>
I want to show <div class="fe"></div> in perfect center. When I use left: 50%; its works but not showing in perfect center.
.fe {
position: fixed;
bottom: 0;
left: 50%;
width: 150px;
height: 50px;
background-color: black;
}
Method 1:
Add transform: translateX(-50%).
body {
background: #ccc;
}
.fe {
transform: translateX(-50%);
background-color: black;
position: fixed;
width: 150px;
height: 50px;
bottom: 0;
left: 50%;
}
<div class="fe"></div>
Method 2:
Use negative margin equal to half of element width. i.e as you have width of .fe 150px so use margin-left: -75px
body {
background: #ccc;
}
.fe {
background-color: black;
margin-left: -75px;
position: fixed;
width: 150px;
height: 50px;
bottom: 0;
left: 50%;
}
<div class="fe"></div>
You can translate the element to move 50% left its own size:
transform:translateX(-50%);
Like this:
.fe {
position: fixed;
bottom: 0px;
left: 50%;
transform:translateX(-50%);
width: 150px;
height: 50px;
background-color: black;
}
instead of setting left to 50%, set left=0 and right=0 and margin=auto.. this will center automatically to center.
.fe {
position: fixed;
bottom: 0px;
left: 0;
right: 0;
margin: auto;
width: 150px;
height: 50px;
background-color: black;
}
Try using margin-left and margin-right as shown below
margin-left: auto;
margin-right: auto;
Setting both these to auto will center the division. For further info in this regard, you can refer this tutorial.
you can use property align="center" for div
.fe{ align="center"
}
Or in div you can define
<div class="fe" align="center"></div>
Try this Add transform: translateX(-50%); property to your code
.fe {
position: fixed;
bottom: 0px;
left: 50%;
width: 150px;
height: 50px;
background-color: black;
transform: translateX(-50%);
margin:auto;
}
In order to translate an element completely out of view, I used transform: translate(0, -100%);. Its children however, if you resize the window compressing its height far enough, will gradually reappear. I have no clue why they do this, and I'd like someone to shed light on the reason why this happens. Here's the fiddle.
HTML
<body>
<div id="background">
<div id="circle1"></div>
<div id="circle2"></div>
</div>
</body>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#background {
background-color: red;
height: 100%;
width: 100%;
position: fixed;
transform: translate(0, -100%);
}
#circle1 {
background-color: yellow;
height: 500px;
width: 500px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
border-radius: 50%;
z-index: 0;
}
#circle2 {
background-color: aqua;
height: 400px;
width: 400px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
border-radius: 50%;
z-index: 1;
}
you have fixed heights for your cirecles (500px / 400px). When #background's height becomes less than that by resizing the window, the circles would overflow #background vertically.
The translatemovement by 100% refers to #background, so you still see the part of the circles that would overflow #background without the translate setting.