I have placed 3 div. First parent having css like position relative and it is taking full width of viewport. 2nd children is having absolute position to cover all area of parent. The 3rd children is also having absolute position with margin: 0 auto.
.slide-block {
position: relative;
}
.slide-block .slide-block-center-wrapper {
top: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.slide-block .slide-block-content {
max-width: 1180px;
margin: 0 auto;
padding: 0 30px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
left: 0;
right: 0;
}
<div class="slide-block">
<div class="slide-block-center-wrapper">
<div class="slide-block-content">
...some slide caption content
</div>
</div>
</div>
The problem is, .slide-block-content is not appearing in center in IE browser. It is appearing in center in chrome and mozilla.
You can try to solve it like below. For the element to be vertically centered the height needs to be known. I also changed the 3rd child to inline block and used the transform to horizontally center it. If you only need to vertically center it, you can remove the left: 50% and change the translate to translateY.
.slide-block {
position: relative;
width: 100%;
height: 200px;
background: deepskyblue;
}
.slide-block .slide-block-center-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.slide-block .slide-block-content {
display: inline-block;
max-width: 1180px;
padding: 0 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
-moz-transform: translate(-50%);
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
}
<div class="slide-block">
<div class="slide-block-center-wrapper">
<div class="slide-block-content">
...some slide caption content
</div>
</div>
</div>
*{
margin: 0px; /* Added */
padding: 0px; /* Added */
}
.slide-block {
align-items: center; /* Added */
}
.slide-block .slide-block-center-wrapper {
top: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.slide-block .slide-block-content {
max-width: 1180px;
margin: 0px;
padding:0px;
position: absolute;
top: 50%;
left:50%; /* Added */
transform: translate(0,-50%);
-moz-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
}
<div class="slide-block">
<div class="slide-block-center-wrapper">
<div class="slide-block-content">
...some slide caption content
</div>
</div>
</div>
Try by adding justify-content: center to your .slide-block .slide-block-content. Hope this will work.
.slide-block .slide-block-content {
justify-content: center
}
Related
I am having an issue were i can move an image, no matter what i type it stays in the top right half cut out with no scrolling
.container_767 {
position: relative;
text-align: center;
color: #fff;
}
.imagetext_767 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.image_767 {
position: relative;
width: 45%;
height: 45%;
left: 50%;
bottom: 50%;
transform: translate(-50%, -50%);
}
<div class="container_767">
<img class="image_767" src="../images/aircraft/CS767_TN.JPG">
<div class="imagetext_767">Captain Sim 767</div>
</div>
Change the position: absolute; to position: relative; in the .imagetext_767
.imagetext_767 {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
If you want to use CSS properties like left, right, top and bottom, the element have to has property position set to value absolute. Then you will be able to position it to its first parent, which has property position set to value relative. If there is no parent element with this property value, position is set acording to left top conrner of window.
In addition, to use property top or bottom to be computed by percents, parent element must has it's own height.
Look at code snippet to see the example.
.container_767 {
position: relative;
text-align: center;
background: aliceblue;
height: 500px;
}
.imagetext_767 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.image_767 {
position: absolute;
width: 45%;
height: 45%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="container_767">
<img class="image_767" src="../images/aircraft/CS767_TN.JPG">
<div class="imagetext_767">Captain Sim 767</div>
</div>
I'm trying to center a heading both vertically and horizontally inside a div that is rotated 45deg (transform:rotate(45deg);).
Because the div is rotated - I rotate the heading the opposite direction (transform:rotate(-45deg);) and then apply regular centering techniques which doesn't work. What is the solution for this?
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin:0 auto;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: rotate(-45deg);
}
<html>
<body>
<div id="wrap"><h1>some centered text</h1></div>
</body>
</html>
In your h1 element you defined this style
h1 {
...
transform: translate(-50%, -50%);
transform: rotate(-45deg);
}
you're overriding the first transform property with the rotate() and doing so you're losing the centering effect obtained by the negative translate(): you should chain instead the two transformation like so
h1 {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%) rotate(-45deg);
}
You should also remove the default margin applied on the h1 element (edit the demo and see what happens without margin: 0;)
Example: http://codepen.io/anon/pen/jWjxeW?editors=1100
You should write one transform function right after another
I made a small change in your css, also added text-align: center;
transform: rotate(-45deg) translate(0, -100%);
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin:0 auto;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: rotate(-45deg) translate(0, -100%);
text-align: center;
}
<html>
<body>
<div id="wrap"><h1>some centered text</h1></div>
</body>
</html>
use this transform: translate(-50%, -50%) rotate(-45deg);
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin:0 auto;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
<html>
<body>
<div id="wrap"><h1>some centered text</h1></div>
</body>
</html>
You can achieve this by encapsulating your h1 in another div
#wrap {
position: relative;
transform: rotate(45deg);
top: 150px;
background-color: blue;
height: 300px;
width: 300px;
margin: 0 auto;
}
#text {
position: absolute;
height: 300px;
width: 300px;
transform: translate(-50%, -50%);
transform: rotate(-45deg);
background-color: red;
}
h1 {
text-align: center;
line-height: 300px;
margin: 0; /* H1 has default margin, read more: https://www.w3.org/TR/html-markup/h1.html *
}
<html>
<body>
<div id="wrap">
<div id="text">
<h1>some centered text</h1>
</div>
</div>
</body>
</html>
If you're happy to fix the height/width of your h1 elements, something like this will do it:
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: rotate(-45deg);
height: 120px;
line-height: 40px;
width: 150px;
margin-top: -60px;
text-align: center;
margin-left: -75px;
}
I've got the following HTML markup:
<div class="custom-alert-window" id="alert-window">
<span id="alert-window-text">Hi!</span>
</div>
And this is my CSS:
div.custom-alert-window{
z-index: 100;
width: 30%;
border: 1px solid grey;
border-radius: 7px;
background-color: #FFF;
height: 5%;
position: absolute;
bottom: -156px;
margin-left: 37.5%;
text-align: center;
padding: 5px;
}
div.custom-alert-window > span{
margin: 0px;
padding: 0px;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
But for some reason, the <span> is not vertically centered. It does position itself 50% from the top, but the transform: translateY(-50%); function doesn't work for some reason.
The element needs to be vertically centered in relation to its parent, if you want the element to be vertically centered in the entire page, make sure it is not wrapped in a container which has non-static positioning. Otherwise, the element will be vertically centered relative to its parent height.
JSFiddle
div.custom-alert-window {
width: 30%;
height: 10%;
border: 1px solid grey;
border-radius: 7px;
background-color: #FFF;
text-align: center;
padding: 5px;
/* vertical centering */
position: absolute;
z-index: 100;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
/* horizental centering */
margin:0 auto;
left: 0;
right: 0;
}
div.custom-alert-window span {
/* vertical centering */
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
<div class="custom-alert-window" id="alert-window">
<span id="alert-window-text">Hi!</span>
</div>
For some reason, it worked when I changed the position of the span to absolute.
div.custom-alert-window > span{
position: absolute;
}
Here is my code:
div {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
margin: 0;
padding: 0;
}
<div>This sentence should be displayed in the center of the whole screen
</div>
I tried margin and padding to make the div in the center of the whole screen. (horizonly and vertically). However, neither margin nor padding can center the element.
Then I tried left: 50% and top:50%, it changes the position of the element, but not as expected. The left margin of <div> is located to left:50%, while I want the center of <div> to be located to left:50%..
Does anyone have ideas about this?
use - transform: translate
div {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
margin: 0;
padding: 0;
background: #ccc;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
<div>This sentence should be displayed in the center of the whole screen</div>
div {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
margin: 0;
padding: 0;
transform: translate(-50%, -50%);
}
Try like this: Demo
html, body {
height: 100%;
}
body {
display: table;
margin: 0 auto;
}
div {
height: 100%;
display: table-cell;
vertical-align: middle;
}
Try this fiddle.
div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 200px;
height: 50px;
}
This should help you.
You need to use the transform:translate css.
div {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Fiddle here
Here you go. Keep position as relative and text-align it to center, if you don't want to use translate.
div {
position: relative;
text-align:center;
}
here is the fiddle
Try this:
div {
position: relative;
text-align:center;
top:50%;
}
Its Simple and Responsive try this
div {
margin: auto;
width:50%;
}
Working Fiddle Here
I want to overlap two divs and then center them vertically and horizontally.
I am able to overlap the divs and center them vertically, BUT horizontal centering is not working.
In the css code, I have a class that I copied from some website and it functions to center any div (hope so!).
Here is the fiddle to it:
http://jsfiddle.net/o3c8768h/1/
HTML:
<div id="micWidgetContainer">
<div id="micWidgetCircle" class="centerme"></div>
<div id="micWidget" class="centerme">
</div>
</div>
CSS:
#micWidgetContainer {
width: auto;
height: 500px;
position: relative;
margin: 0 auto;
}
.centerme {
margin: 0 auto;
display: table;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#micWidgetCircle {
width: 200px;
height: 200px;
position: absolute;
display: block;
margin: 0 auto;
border-radius: 50%;
background: #D0CBCB;
}
#micWidget {
display: block;
width: 200px;
height: 100px;
position: absolute;
border-radius: 40%;
background: #EEE;
z-index: 10;
}
if you want to center vertically and horizontally a block you have to use the position:absolute property and the left, top, bottom and right statements.
i rewrited your .centerme class in order to make it works
.centerme {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
http://jsfiddle.net/o3c8768h/9/