垂直和水平alignment（中间和中心）与CSS
我正在练习CSS，我很困惑如何强迫我的div元素在我的页面中心（垂直和水平）（意味着跨浏览器兼容性的方式或方式）？
最好的祝福 ！
有很多方法：
- 居中水平和垂直alignment的元素与固定的措施
CSS
<div style="width:200px;height:100px;position:absolute;left:50%;top:50%; margin-left:-100px;margin-top:-50px;"> <!–content–> </div>
2。 水平和垂直居中一行文本
CSS
<div style="width:400px;height:200px;text-align:center;line-height:200px;"> <!–content–> </div>
3。 居中水平和垂直alignment的元素没有具体的措施
CSS
<div style="display:table;height:300px;text-align:center;"> <div style="display:table-cell;vertical-align:middle;"> <!–content–> </div> </div>
更多在这里： CSS中的水平和垂直alignment
这篇博客文章描述了两种水平和垂直居中的方法。 一个只使用CSS，并将使用具有固定大小的div; 另一个使用jQuery，并将预先为您不知道大小的div。
我在这里复制了博客post的演示中的CSS和jQuery示例：
CSS
假设你有一个类的.classname的div，下面的CSS应该工作。
left:50%; top:50%; left:50%; top:50%; 将div的左上angular设置为屏幕的中心; margin:-75px 0 0 -135px; 将其移动到左侧，并分别向上移动固定大小div的宽度和高度的一半。
.className{ width:270px; height:150px; position:absolute; left:50%; top:50%; margin:-75px 0 0 -135px; }
jQuery的
$(document).ready(function(){ $(window).resize(function(){ $('.className').css({ position:'absolute', left: ($(window).width() - $('.className').outerWidth())/2, top: ($(window).height() - $('.className').outerHeight())/2 }); }); // To initially run the function: $(window).resize(); });
下面是实践中的技术演示 。
本网站提供了一些垂直居中您的div的选项： http : //www.jakpsatweb.cz/css/css-vertical-center-solution.html
这并不像人们所期望的那样容易 – 如果知道容器的高度，则只能进行垂直alignment。 如果是这样的话，你可以用绝对定位来完成。
其概念是将顶部/左侧位置设置为50％，然后使用负边距（设置为高度/宽度的一半）将容器拉回到居中位置。
例如： http : //jsbin.com/ipawe/edit
基本的CSS：
#mydiv { position: absolute; top: 50%; left: 50%; height: 400px; width: 700px; margin-top: -200px; /* -(1/2 height) */ margin-left: -350px; /* -(1/2 width) */ }
现在有一个更好的解决scheme： 用3行CSS垂直alignment任何东西
