垂直和水平在页面上居中放置<div>的最佳方法是什么？
在页面上垂直和水平居中放置<div>元素的最佳方法？
我知道这个margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto; 将集中在水平方向，但垂直方向最好的方法是什么？
最好和最灵活的方式
我在dabblet.com上的演示
这个演示的主要技巧是在正常的元素流从上到下，所以margin-top: auto被设置为零。 但是，绝对定位的元素对于自由空间的分配行为是相同的，并且类似地可以垂直居中在指定的top和bottom （在IE7中不起作用）。
这个技巧将适用于任何大小的div 。
HTML：
<div></div>
CSS：
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
尽管OP在提出这个问题时并不奏效，但我认为，至少对于现代浏览器来说，最好的解决方案是使用display：flex或pseudo类 。
你可以在下面的小提琴中看到一个例子。 这是更新的小提琴。
对于伪类，一个例子可能是：
.centerPseudo {
display:inline-block;
text-align:center;
}
.centerPseudo::before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
width:0px;
}
根据css-tricks和MDN， display：flex的用法如下：
.centerFlex {
align-items: center;
display: flex;
justify-content: center;
}
还有其他可用于flex的属性，这些属性在上述链接中进行了解释，并提供了其他示例。
如果您必须支持不支持css3的旧浏览器，那么您应该使用javascript或其他答案中显示的固定宽度/高度解决方案。
这种技术的简单性令人惊叹：
（虽然这种方法有其含义，但是如果您只需要将元素居中而不考虑剩余内容的流向，那就太好了，小心使用）
标记：
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan tellus purus, et mollis nulla consectetur ac. Quisque id elit at diam convallis venenatis eget sed justo. Nunc egestas enim mauris, sit amet tempor risus ultricies in. Sed dignissim magna erat, vel laoreet tortor bibendum vitae. Ut porttitor tincidunt est imperdiet vestibulum. Vivamus id nibh tellus. Integer massa orci, gravida non imperdiet sed, consectetur ac quam. Nunc dignissim felis id tortor tincidunt, a eleifend nulla molestie. Phasellus eleifend leo purus, vel facilisis massa dignissim vitae. Pellentesque libero sapien, tincidunt ut lorem non, porta accumsan risus. Morbi tempus pharetra ex, vel luctus turpis tempus eu. Integer vitae sagittis massa, id gravida erat. Maecenas sed purus et magna tincidunt faucibus nec eget erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mollis sem.</div>
和CSS：
div {
background:red;
position:absolute;
color:#fff;
top:50%;
left:50%;
padding:15px;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
这也将水平和垂直居中元素。 没有负边距，只是变换的力量。 我们也应该忘记IE8了吗？
链接地址: http://www.djcxy.com/p/7169.html上一篇: Best way to center a <div> on a page vertically and horizontally?