本文介绍了为什么自动边距只适用于水平方向，而不适用于垂直方向？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我看到，在开发网站时，在任意高度的容器中垂直居中放置(固定高度的)容器对Web开发人员(至少是我来说)来说总是一场噩梦，而在水平居中放置随机宽度的容器(固定宽度)时，margin:0px auto;在标准模型中往往是一种简单的解决方案。
当事情可以这么简单时，当涉及到将固定高度的容器居中放置在任意高度的容器中时，margin:auto 0px;为什么不适用于margin:auto 0px;？这样做有什么特别的原因吗？
推荐答案
这真的没有你想象的那么可怕，只是不要使用边距。vertical-align是您真正应该依靠的流体高度垂直居中。我拼凑了一个快速演示来证明我的观点：
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
text-align: center;
}
span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
#any-height {
background: #000;
text-align: left;
width: 200px;
height: 200px;
vertical-align: middle;
display: inline-block;
}<span></span>
<div id="any-height"></div>参见：http://jsfiddle.net/Wexcode/jLXMS/
这篇关于为什么自动边距只适用于水平方向，而不适用于垂直方向？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！