I have been searching on google and stack overflow for a while, but nothing seems to work.
I am trying to center a div within a div, which is all contained within a page wrapper. I can get it to center horizontally, but not vertically. Any suggestions?
I have tried display:inline-block with vertical-align:middle, but it had no effect.
CSS
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-color: black;
}
#page-wrapper {
padding: 0 12.5% 0 12.5%;
margin: 0;
}
#outer {
width: 100%;
height: 1000px;
background-color: darkgray;
position: relative;
}
#inner {
position: relative;
width: 50%;
height: 20%;
margin: 0 auto;
background: grey;
}
<body>
<div id="page-wrapper">
<div id="outer">
<div id="inner"></div>
</div>
</div>
</body>
You could:
A. Change the height to be a specific number and add margin-top: -height;
OR
B. Add this into the code for the #inner
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Example of B: CodePen.io
OR
C. If you want to make it fancy use a flexbox (instructions here: Flexbox complete guide) and add:
display: flex;
justify-content: center;
align-items: center;
This may help https://css-tricks.com/centering-css-complete-guide/
change
#inner {
position:relative;
width: 50%;
height: 20%;
margin: 0 auto;
background:grey;
}
to
#inner {
width: 50%;
height: 20%;
margin: 0 auto;
background:grey;
/* magic here */
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You can do that by using flexbox, together with align-items: center; and justify-content: center;
Have a look at this: https://codepen.io/anon/pen/GOQwre
Related
I would like to create a css class so a div can be placed in the center of its parent. The code I am using is:
.centered {
position: absolute;
margin: auto;
bottom: 0px;
left: 0px;
top: 0px;
right: 0px;
}
It works if the parent is larger than the child element, or has the same size:
https://jsfiddle.net/cy8dn1km/
But if the child is larger, then its center is not positioned at the center of its parent. Instead their left borders will be at the same place, and the child element will be extended only to right:
https://jsfiddle.net/797L7nce/
Something is wrong with the horizontal centering.
How is it possible to fix it using CSS only (without using CSS 2D/3D transformations), without adding new container elements?
Add left: 50%; transform: translate(-50%, 0);and remove right: 0px;
.centered {
position: absolute;
margin: auto;
display: block;
bottom: 0px;
top: 0px;
left: 50%;
transform: translate(-50%, 0);
}
Demo
Here is a solution without using CSS 2D/3D transformations. You can use display: flex with flex-direction: column (this is important) on parent element and display: table on child element.
body,
html {
width: 100%;
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: green;
}
.centered.d1 {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.d1 {
background: yellow;
width: 50px;
height: 50px;
}
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
display: table;
}
<div class="centered d1">
<div class="centered d2"></div>
</div>
If you know the dimentions of the elements you can use the left/top position at 50% with negative margins of half the element size.
I have updated your fiddle here: https://jsfiddle.net/797L7nce/2/
.centered {
position: absolute;
display: block;
left:50%;
top:50%;
}
.d1 {
background: yellow;
width: 50px;
height: 50px;
margin-left:-25px;
margin-top:-25px;
}
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
margin-left:-125px;
margin-top:-125px;
}
Ok i tried without 2D CSS :
Change absoluteto fixed and add some margin: auto;
JSfiddle here
body, html {
width: 100%;
height: 100%;
}
body {
position: relative;
background: green;
}
.centered {
position: fixed;
margin: auto;
display: block;
bottom: 0px;
left: 0px;
top: 0px;
right: 0px;
}
.d1 {
background: yellow;
width: 50px;
height: 50px;
}
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
}
<div class="centered d1">
<div class="centered d2">
</div>
</div>
You're almost there. Just set the absolute positions to the same (large) negative number, to make enough room for the auto margin:
.centered {
position: absolute;
margin: auto;
bottom: -9999px;
left: -9999px;
top: -9999px;
right: -9999px;
}
https://jsfiddle.net/797L7nce/9/
Adding the below CSS to .d2 will solve the issue.
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
position:absolute;
left:50%;
margin-left:-125px;
}
You can check the demo here
In Bootstrap 4:
to center the child horizontally, use bootstrap-4 class:
justify-content-center
to center the child vertically, use bootstrap-4 class:
align-items-center
but remember don't forget to use d-flex class with these
it's a bootstrap-4 utility class, like so
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
Note: make sure to add bootstrap-4 utilities if this code does not work
I know it's not the direct answer to this question but it may help someone
I have this simple code to vertically and horizontally center a text element on a page:
body {
max-width: 1200px;
margin: 0 auto;
}
.container {
position: relative;
transform-style: preserve-3d;
height: 100vh;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%);
}
Doing this places the text in the in the vertical center of the container, but ever-so-slightly off-center to the right on the horizontal. I would think "left: 50%" would horizontally center it correctly, no?
Close, but you need to add translateX as well. Luckily, there's a nice shorthand for accomplishing both X and Y transform at the same time:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The reason it's slightly off-center is because left: 50% pushes the element so that it's left side is at 50% exactly. Adding the transformX(-50%) negates that extra space. See the snippet below:
.box-container {
position: relative;
height: 200px;
}
.center-box {
position: absolute;
background: black;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="box-container">
<div class="center-box"></div>
</div>
If you can use flexbox then I would recommend using it. It makes this very simple:
body {
margin: 0;
}
.container {
height: 400px; /* Just for the snippet */
width: 400px; /* Just for the snippet */
background-color: #f4f4f4; /* Just for the snippet */
margin: 0 auto; /* Just for the snippet */
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="center">
This is centered
</div>
</div>
You can find about flexbox browser support from here: http://caniuse.com/#search=flex
In my webpage section i use a icon gallery. I insert an image/icon in a div and manage through css for align center (vertical and horizontal). But i found my image align center vertically not exact center in my div. See my code and css.
css
#main {
width: 170px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
align-items: flex-start;
}
#main div{
width: 70px;
height: 70px;
align-self: center;
background:red;
}
and
html
<div id="main">
<div></div>
</div>
See my Example
How to align my image in exact center in body or div?
You can use align-items: center and justify-content: center
#main {
width: 170px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
align-items: center;
justify-content: center;
}
#main div {
width: 70px;
height: 70px;
background: red;
}
<div id="main">
<div></div>
</div>
In case you have some other elements in #main but you want div to be vertically and horizontally centered you can remove div from elements flow with position: absolute and use transform: translate().
#main {
width: 170px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
#main div,
span {
width: 70px;
height: 70px;
background: red;
}
span {
align-self: flex-start;
background: green;
}
#main div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="main">
<span></span>
<div></div>
</div>
I like to use this nice little transform translate trick to center things.
In your case
#main {
width: 170px;
height: 300px;
border: 1px solid #c3c3c3;
position: relative;
}
#main div {
width: 70px;
height: 70px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background:red;
}
So use position: relative on your parent element and position: absolute on the child element. On the absolute element use left: 50% and top: 50% along with transform: translate(-50%, -50%) and everything should be centered.
add "margin:0 auto;" to your image like this:
#main div{
margin: 0 auto;
}
here the fiddle: https://jsfiddle.net/px52mk5b/5/
-I hope this help
In your code there is a small change is needed to get your desire output. That is include the code margin: 0 auto; along with the #main div css. Then the css will be as below.
#main div{
width: 70px;
height: 70px;
align-self: center;
background:red;
margin: 0 auto;/*Newly added one*/
}
I've updated your jsfiddle Example. Click here
I am having a really hard time with getting this image centered.
I have tried the following:
margin: 0 auto;
display: block;
text-align: center;
I really do not want to use the left command because it isn't working in my mobile setting. I just want a fixed property that will work everywhere and I won't have to add it again.
Why is this image not centering?
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: relative;
/*left: 50%;*/
height: 200px;
width: auto;
}
.approach-tablet img {
display: block;
margin: 0 auto;
}
<div id="section3-container">
</div>
<img src="/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
I had also tried the below but it still doesn't work.
.approach-tablet {
bottom: 0;
position: absolute;
/*left: 50%;*/
}
img.approach-tablet {
display: block;
margin: 0 auto;
text-align: center;
}
I need the position: absolute to position the div where I am wanting it to go. It sits on the bottom of the page. Regardless, the image isn't centering with what is in there.
As indicated in this SO answer, an element that is positioned absolutely cannot be centered using the margin: 0 auto method and you would have to resort to other options.
One option would be to use left: 50% and then use transform: translateX(-50%) to get it back to the center. The left: 50% offsets the image 50% from the left edge of the page (but this alone will not center the image because the image's left edge is at page center). The translateX(-50%) moves the image to the left by half of the image's width and thus would result in the image's center being at page center.
This should work in all modern browsers (including mobile) as the browser support is good.
As can be seen from the snippet (view it in normal mode and full page mode), no special tweaking is needed for it to be responsive.
Note: Though you had stated that you don't want to use left property in the question, I understand based on your comment that the reason was that mobile support is needed and be responsive.
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: absolute;
left: 50%;
height: 200px;
transform: translateX(-50%);
}
<div id="section3-container">
</div>
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
Please use below code
<div id="section3-container">
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>
CSS
#section3-container {
margin: 0 auto;
text-align: center;
width: 100%;
}
.approach-tablet {
height: 200px;
margin: 0 auto;
text-align: center;
width: auto;
}
Your image is outside of the div. If you put it inside, it centers
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: relative;
/*left: 50%;*/
height: 200px;
width: auto;
}
.approach-tablet img {
display: block;
margin: 0 auto;
}
<div id="section3-container">
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>
Just add another div, html is all about divs:
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: relative;
/*left: 50%;*/
height: 200px;
width: auto;
}
.approach-tablet img {
display: block;
margin: 0 auto;
}
#section4-container {
text-align: center;
width: 100%;
}
<div id="section3-container">
</div>
<div id="section4-container">
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>
i created a maze and i want to center an inside div
although i center it with margin: 0 auto; it won't work
(this div shows sad smily face when user enter the wall and lose)
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
display: none;
margin: 0 auto;
}
here is the fiddle link:
http://jsfiddle.net/uqcLn/28/
If you're going to use absolute positioning you need to do it like this:
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -225px;
display: none;
}
Edit: you also need to add position:relative; to the main div. Here is an updated fiddle.
http://jsfiddle.net/FragJ/2/
It looks off because you have other elements that aren't exactly centered.
EDIT: As I stated earlier, the smiley didn't look centered because your code is off. The maze really should be inside a div itself. However I was able to eyeball center it simply by playing with the margins.
http://jsfiddle.net/FragJ/4/
To achieve this you'll need to set your css like this:
#main {
position: relative;
width: 550px;
height: 550px;
float: left;
margin-left: 220px;
margin-top: 100px;
background: grey;
overflow: hidden;
}
#highlight_win {
width: 550px;
height: 550px;
position: absolute;
top: 50%;
left: 50%;
display: none;
margin: -180px 0 0 -180px;
}
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -180px;
display: none;
}
.outer {
height: 600px;
width: 500px;
background-color: black;
}
.inner {
height: 200px;
width: 200px;
margin: auto;
position: relative;
top: 200px;
background-color: red;
}
markup
<div class="outer">
<div class="inner">
</div>
</div>
The idea is for fixed sized block elements, setting
margin:auto;
fixes horizontal centering
for vertical central alignment the child's top = half the height of the parent - half the height of the child