使DIV水平和垂直居中
使DIV水平和垂直居中
提问于 2013-01-02 22:43:40
有没有办法在垂直和水平方向上剪切DIV，但是，很重要的一点是，当窗口比小时，内容不会被剪切。 div必须有背景色和宽度和高度。
我总是用绝对位置和负边距居中div，就像提供的例子一样。但它有一个问题，那就是它在顶部削减了内容。有没有一种方法可以使div .content居中而不出现这个问题？
我这里有一个例子：http://jsbin.com/iquviq/1/edit
CSS：
body { margin: 0px; }
.background {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: yellow;
}
/*
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?:
*/
.content {
width: 200px;
height: 600px;
background-color: blue;
position:absolute;
top:50%;
left:50%;
margin-left:-100px;/* half width*/
margin-top:-300px;/* half height*/
}HTML：
<div class="background">
<div class="content"> some text </div>
</div>我的问题不是重复“如何水平和垂直居中元素？”1-我的问题以前被问过。(只需检查日期)。2-我的问题问得非常清楚，用黑色作为条件：“当窗口小于内容时，内容不会被剪切。”
回答 6
Stack Overflow用户
回答已采纳
发布于 2013-02-12 00:50:00
在尝试了很多方法之后，我找到了一种可行的方法。如果它对任何人有用，我在这里分享它。你可以在这里看到它的工作原理：http://jsbin.com/iquviq/30/edit
.content {
width: 200px;
height: 600px;
background-color: blue;
position: absolute; /*Can also be `fixed`*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
/*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
max-width: 100%;
max-height: 100%;
overflow: auto;
}Stack Overflow用户
发布于 2014-05-17 04:00:31
Stack Overflow用户
发布于 2013-01-02 22:53:40
这是一个演示：http://www.w3.org/Style/Examples/007/center-example
A method (JSFiddle example)
CSS：
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
#content {
display: table-cell;
text-align: center;
vertical-align: middle;
}HTML：
<div id="content">
Content goes here
</div>Another method (JSFiddle example)
CSS
body, html, #wrapper {
width: 100%;
height: 100%
}
#wrapper {
display: table
}
#main {
display: table-cell;
vertical-align: middle;
text-align:center
}HTML
<div id="wrapper">
<div id="main">
Content goes here
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14123999
复制相关文章
相似问题