center a div box in the middle of the page using css
I want to center a div right in the middle of the page, I tried top:30%, but when the window is resized 开发者_运维知识库off the alignment.
<div id=cent></div>
Thanks Jean
If you know the height/width of that div (for instance, it will be 100px X 200px) then you can do it like this:
#cent {
position:absolute;
top:50%;
left:50%;
margin-top:-50px; /* this is half the height of your div*/
margin-left:-100px; /*this is half of width of your div*/
}
UPDATE: another option: see http://www.w3.org/Style/Examples/007/center (Centering vertically)
I know this question is pretty old, but I stumbled upon it, and I'll probably look for it again in the future.
In my case, the content has a variable height, and I don't want to use absolute positioning, so I used a flexbox container instead. You just need to wrap your content inside a div with the following style:
.container {
min-height: 100vh; /* minimum height = screen height */
display: flex;
justify-content: center;
align-items: center;
}
Example: https://codepen.io/alephao/pen/mdPRYqZ
I know this question is 9 years old, but having stumbled upon it 9 years later, maybe someone else could do the same.
This is my working solution:
#cent {
position: absolute;
width: 500px;
height: 500px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
By doing this it will set the width and height to 500px, then it will set the top, left, right and bottom constraints to 0, and finally, by setting the margins to auto, the box will be put in the exact middle of the window. This will also be responsive.
Adding notes to naivists' link (to w3c tips site):
display:table-cell does not work with height:100%. So, if you want to vertically center an element, which you don't know its height, on a page, you need to put it inside a container with display:table and height:100%, and another container with display:table-cell and vertical-align:middle.
Furthermore, if you want to center it horizontally, you need to specify width:100% to body, the outer container, and give text-align:center to inner container. The content should have display:inline-block, and to reset alignment, text-align:left.
Ultimately, it becomes as follows:
<style>
#vcontainer {
display: table;
height: 100%;
width: 100%;
}
#hcontainer {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#content {
display: inline-block;
border: lightGray 1px solid;
background-color: lightBlue;
text-align: left;
}
</style>
<body>
<div id="vcontainer"><div id="hcontainer">
<div id="content">
Hoyjo!<br>
I have returned to my hometown!<br>
Lolololo lololo lololo lololo lololo!<br>
</div>
</div></div>
</body>
I cannot guarantee it will work on legacy browsers (IE6/7). It will work on IE8 provided it runs on IE8 standards (yes, this will screw your mind. Thanks, MS!), and you must give <html> and <body> the height:100%.
HTML:
<div id="box"></div>
CSS:
#box{
background-color: green;
width:100px;
height:100px;
margin:auto; /*This will center it horizontally but not vertically*/
}
Watch out of the quotes or double quotes around the id "box", you need them.
<div id="content"
style="text-align: center;
vertical-align: middle;
border-color: #000000;
border-width: 1px;
border-style: solid;
margin-top: 25%;
margin-bottom: 25%;">
hi
</div>
This worked for me...
Edit : This will align the whole div... regardless of the size of the div or the page... Assuming that this id the only div in the whole page...
If you want the top middle:
HTML:
<div class="cent">
<!-- code -->
</div>
CSS:
.cent {
align: center;
}
and if you want direct middle, use the same HTML but change the CSS to:
.cent {
align: center;
position: absolute;
top: 40%;
left: 45%;
}
Example Code: jsfiddle.net/Lzdvnk29 (it may not look centered if you
look at it, but if it is a full HTML page it will show in the direct middle)
I tried @alephao's answer and wasn't enough cause the div stood at the top.
So I made this one which works for me:
#cent {
display: flex;
justify-content: center;
align-items: center;
margin: auto;
margin-top: 25vh;
}
Hope this is what you search for.
Here's how:
#cent
{
margin-left:50px;
margin-right:50px;
}
Now your div is going to be 50px from left and right and centered in whatever container you have it in.
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
加载中,请稍侯......
精彩评论