居中水平和垂直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我的问题曾被问过。 （只是检查date）。 2-我的问题问得很清楚，在黑色的条件是：“窗口小于内容时内容不会被剪切”
尝试了很多东西之后，我发现了一个可行的方法。 如果对任何人有用，我都会在这里分享。 你可以在这里看到它的工作： http : //jsbin.com/iquviq/30/edit
.content { width: 200px; height: 600px; background-color: blue; position:absolute; /*it can be fixed too*/ left:0; right:0; top:0; bottom:0; margin:auto; /*this to solve "the content will not be cut when the window is smaller than the content": */ max-width:100%; max-height:100%; overflow:auto; }
对于现代浏览器
当你有这种奢侈。 也有flexbox，但是在写这篇文章的时候没有得到广泛的支持。
HTML：
<div class="content">This works with any content</div>
CSS：
.content { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
在Codepen或JSBin上进一步修补它
对于较旧的浏览器支持，请查看此主题的其他地方
这是一个演示： http : //www.w3.org/Style/Examples/007/center-example
一个方法 （ JSFiddle例子 ）
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>
另一种方法 （ JSFiddle例子 ）
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>
对于任何浏览器大小，不pipediv大小如何，合法的做法是：
div{ margin:auto; height: 200px; width: 200px; position:fixed; top:0; bottom:0; left:0; right:0; background:red; }
现场代码
我不相信有一种方法严格使用CSS。 原因是你对这个问题的“重要”限定词：强迫父元素随其子元素的内容展开。
我的猜测是，你将不得不使用一些JavaScript来find孩子的身高，并作出调整。
所以，用这个HTML：
<div class="parentElement"> <div class="childElement"> ...Some Contents... </div> </div>
这个CSS：
.parentElement {
位置：相对;
宽度：960像素;
}
.childElement {
位置：绝对的;
顶部：50％;
左：50％;
}
这jQuery可能是有用的：
$('.childElement').each(function(){ // determine the real dimensions of the element: http://api.jquery.com/outerWidth/ var x = $(this).outerWidth(); var y = $(this).outerHeight(); // adjust parent dimensions to fit child if($(this).parent().height() < y) { $(this).parent().css({height: y + 'px'}); } // offset the child element using negative margins to "center" in both axes $(this).css({marginTop: 0-(y/2)+'px', marginLeft: 0-(x/2)+'px'}); });
请记住正确加载jQ，或者在受影响元素的正文中，或者在$(document).ready(...)的头部。
你想设置风格
margin: auto;
并删除定位样式（顶部，左侧，位置）
我知道这将中心horizontaly，但我不知道垂直！
你可以比较不同的方法很好地解释在这个页面上： http : //blog.themeforest.net/tutorials/vertical-centering-with-css/
他们推荐的方法是在你不能居中的内容之前添加一个空的浮动元素，并清除它。 它没有你提到的缺点。
我叉你的JSBin来应用它： http : //jsbin.com/iquviq/7/edit
HTML
<div id="floater"> </div> <div id="content"> Content here </div>
CSS
#floater { float: left; height: 50%; margin-bottom: -300px; } #content { clear: both; width: 200px; height: 600px; position: relative; margin: auto; }
