<div style="width: 100%; position:fixed; display: block;" class="parent">
<div class="child" style="width: 100%; height: 30px; ">mid</div>
</div>
I am going to set the div with the 'child' class in the mid-page using css.
The parent div's position will be fixed.
how do I have to do?
To position an element centered in the screen:
/* Staple class for V and H centered element */
.vertical-and-horizontally-centered-element {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* support for cross browser compatibility */
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
To center the text within in the center of the element use text-align: center. After we put together all your code, you get the following result:
.parent {
width: 100%;
height: 100%;
position: fixed;
display: block;
}
.child {
height: 30px;
position: fixed;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
/* support for cross browser compatibility */
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="parent">
<div class="child">mid</div>
</div>
Another comment, move your inline CSS to its own CSS file, unless you must keep it inline for specific reasons... my two cents :-)
Let me know if you have any questions in the comments below.
Here is everthing centered: https://jsfiddle.net/16q2xr8k/5/
.parent{background-color: lightblue;}
.child{
background-color: lightgreen;
text-align: center;
margin-left: 50%;
position: relative;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Related
This question already has answers here:
How to apply multiple transforms in CSS?
(9 answers)
Closed 11 months ago.
I am trying to rotate the button 180 degrees. I found out that when the 'rotate()' function is called before the 'translate()' one, the rotation doesn't work.
My question is: Why it works like that?
1st code(not working):
.btn--right {
right: 0;
top: 50%;
transform: rotate(180deg);
transform: translate(50%, -50%);
}
2nd code(working):
.btn--right {
right: 0;
top: 50%;
transform: translate(50%, -50%);
transform: rotate(180deg);
}
Because you cannot specify two transform's on one element. The second set of CSS is working because the rotate is positioned last in the DOM order. Therefore it is overriding the translate. You'll notice if you add !important; to your first set of CSS (the one not working), it will work just fine as demonstrated in the snippet.
You can achieve rotate and translate on a single element you can write it like so:
transform: rotate(180deg) translate(50%, -50%);
.btn--right {
right: 0;
top: 50%;
transform: rotate(180deg)!important;
transform: translate(50%, -50%);
}
<button class="btn--right">Send</button>
The second transform property overrides first one
transform: rotate(180deg);
transform: translate(50%, -50%);
transform: translate(50%, -50%); applies
transform: translate(50%, -50%);
transform: rotate(180deg);
transform: rotate(180deg); applies
body {
height: 100vh;
background-color: bisque;
display: grid;
place-items: center;
}
.btn--right{
display: grid;
place-items: center;
background-color: red;
height: 100px;
width: 100px;
right: 0;
top: 50%;
transform: rotate(180deg);
transform: translate(50%, -50%);
/* transform: translate(50%, -50%);
transform: rotate(180deg); */
}
.btn--right p {
color:white;
}
<div class="btn--right">
<p>Hello</p>
</div>
I'm trying to create a button that sticks to the right sidfe of the screen. I want this button the turn 90" and stick 50% vertically. I can't find alot of help online, maybe you guys can help. See my code below, it currently isn't vertically aligned centred.
I also added a picture of how it looks. Thanks in advance!
My current code:
HTML
<button type="button" class="button">
<span class="button__text">Interaction Designer <br> # Company</span>
<span class="button__icon"></span>
</button>
CSS
.button {
position: absolute;
display :flex;
align-items: center;
justify-content: center;
z-index: 999;
top: 50%;
right: 0;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
Picture 2
body {
margin: 0;
}
.button {
position: fixed;
z-index: 999;
top: calc(50% - 120px);
left: unset;
right: -51px;
-webkit-transform: rotate(-90deg) translate(-50%, 0%);
-moz-transform: rotate(-90deg) translate(-50%, 0%);
-o-transform: rotate(-90deg) translate(-50%, 0%);
-ms-transform: rotate(-90deg) translate(-50%, 0%);
transform: rotate(-90deg) translate(-50%, 0%);
}
<button type="button" class="button">
<span class="button__text">Interaction Designer <br> # Company</span>
<span class="button__icon"></span>
</button>
<div style="height:100vh;"></div>
<div style="height:100vh;"></div>
my web site retrokent.com
My problem is the logo is blurry. transform: translate and webkit-transform: translate
.nm-header.centered .nm-header-logo {
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
The problem is solved when I turn off the "transform: translate" and "webkit-transform: translate" features.
But then the logo is position shifting. How can I fix it? Can you help me?
screenshot-1 : https://prnt.sc/tr16j4
screenshot-2 : https://prnt.sc/tr16te
You can center your image without transform: translate(-50%, -50%) just change in your css.
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
z-index: 10;
for responsive you can set text-align: center with media queries.
I have this side-pane. It's height is 80%. In this side-pane I have a text. I want this to always be in the middle.
Main div:
.simulation {
height: 80%;
width: 500px;
border: 1px solid #ccc;
box-shadow: 8px 8px 7px #A5A5A5;
background: #FFF;
position: absolute;
top: 10px;
z-index: 100;
left: -450px;
transition: 500ms ease all;
}
Sub div:
.simulation .simulation-content .simulation-bar .heading {
position: relative;
margin-top: 340px; /* How do I get this in the middle?? */
-webkit-transform: rotate(-90deg);
}
I can't get the margin-top right when i express it in %.
Plunkr: http://plnkr.co/edit/Z8xZNYLNvShQDVPZMZgk?p=preview
You could align the child element vertically at the middle of the parent by positioning the child absolutely and a combination of top: 50% and transform: translateY(-50%).
In this particular instance — Example:
.simulation .simulation-content .simulation-bar .heading {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translate(-30%, -50%) rotate(-90deg);
-moz-transform: translate(-30%, -50%) rotate(-90deg);
-ms-transform: translate(-30%, -50%) rotate(-90deg);
-o-transform: translate(-30%, -50%) rotate(-90deg);
transform: translate(-30%, -50%) rotate(-90deg);
}
An explanation can be found here:
How to center a "position: absolute" element
You can use also flexboxes to achieve it. just add:
display: flex;
flex-flow: column nowrap;
justify-content: center;
to your "main-content"
I'm trying to center this image in the div without the horizontal scroll bars showing up. I need the image to be absolutely positioned within the div.
Fiddle: http://jsfiddle.net/512t9L6b/
HTML
<div>
<img src="http://iqtell.com/wp-content/uploads/2013/05/James-Bond.jpg">
</div>
CSS
div {
position:relative
}
img {
position:absolute;
left: 50%;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
Edit: Tried html { overflow-x:hidden } as suggested but it still scrolls horizontally in mobile.
html {
overflow-x: hidden;
}
will remove the horizontal scrollbar.
Is it what you want ?
http://jsfiddle.net/OxyDesign/3au44f27/
CSS
*{
margin:0;
padding:0;
}
div {
position:absolute;
overflow:hidden;
top:0;
right:0;
bottom:0;
left:0;
}
img {
position:absolute;
left: 50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Or just center horizontally
http://jsfiddle.net/OxyDesign/0cjyfwq8/
CSS
*{
margin:0;
padding:0;
}
div {
position:absolute;
overflow:hidden;
top:0;
right:0;
bottom:0;
left:0;
}
img {
position:absolute;
left: 50%;
top:0;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}