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;
}
Related
i'm struggling with CSS trying to create special shape.
This is the shape i wanna create
enter image description here
Do you have any solution ?
Thank's
How about this:
div {
position: relative;
height: 300px;
overflow: hidden;
border-radius: 25px;
}
.bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-color: blue;
transform: skewY(-6deg);
transform-origin: top right;
border-radius: 25px;
<div>
<div class="bg"></div>
</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 have set up a modal for phots, so when i click on a small photo i get a larger photo up in a modal, the modal has position: fixed; and the modal-content has position: absolute; i can center it with margin: auto; left: 0; right: 0;but then the width goes all the way to the right and left, i want the modal content width to be the same as the photo inside it or the content of the modal-content
my code:
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding: 30px;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
position: absolute;
top: 50px;
margin-bottom: 30px;
margin: auto;
border: 1px solid #888;
}
.modalimg {
position: relative;
text-align: center;
}
.modalimg img{
max-width: 100%;
max-height: 400px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
its maybe a bit messy now but i have tried alot of different things with no luck..
This is what I use when I center an absolute-positioned element, this works for me all the time:
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
here you are please
.element {
position: absolute;
top: 15px;
z-index: 2;
width: 40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin: 0 auto;
left: 0;
right: 0;
background: red;
color: #fff;
text-align: center;
}
<div class="element">
text..
</div>
.modal-content {
background-color: #fefefe;
position: absolute;
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
border: 1px solid #888;
}
to align absolute div to center
left: 0;
right: 0
text-align: center
this will align the div in center.
Here's a possible solution that uses:
absolute positioning on the content container (.modal-content)
doesn't use absolute|fixed on the actual content
The content container (.modal-content) will grow along with its content. Finally, it's moved back to the middle using transform: translate(-50%, -50%);:
.modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
border: 2px solid red;
transform: translate(-50%, -50%);
}
<div class="modal">
<div class="modal-content">
<img src="//placehold.it/200x200" alt="">
</div>
</div>
Demo
Try before buy
I am trying to make an arc in the right border of a div/panel , please let me know if there are any ways to do it. attached is the snapshot of mockup.
You can reach this effect in CSS. Example below.
.wrap {
position: relative;
width: 100px;
height: 400px;
background-color: pink;
overflow: hidden;
}
.wrap::before {
content:'';
width: 300px;
height: 600px;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left:-280px;
background-color: tomato;
}
.wrap::after {
content:'';
width: 300px;
height: 600px;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
margin-top: -280px;
margin-left:-290px;
background-color: white;
}
<div class="wrap">
</div>
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>