为什么自动边距只适用于水平方向，而不适用于垂直方向？

编程基础网前端问题

2022-01-01

Why does margin: auto only work horizontally and not vertically?(为什么自动边距只适用于水平方向，而不适用于垂直方向？)

本文介绍了为什么自动边距只适用于水平方向，而不适用于垂直方向？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我看到，在开发网站时，在任意高度的容器中垂直居中放置(固定高度的)容器对Web开发人员(至少是我来说)来说总是一场噩梦，而在水平居中放置随机宽度的容器(固定宽度)时，margin:0px auto;在标准模型中往往是一种简单的解决方案。当事情可以这么简单时，当涉及到将固定高度的容器居中放置在任意高度的容器中时，margin:auto 0px;为什么不适用于margin:auto 0px;？这样做有什么特别的原因吗？

推荐答案

这真的没有你想象的那么可怕，只是不要使用边距。vertical-align是您真正应该依靠的流体高度垂直居中。我拼凑了一个快速演示来证明我的观点：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

* {
  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/

这篇关于为什么自动边距只适用于水平方向，而不适用于垂直方向？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

编程基础网

本文标题为：为什么自动边距只适用于水平方向，而不适用于垂直方向？

上一篇：自动在边距：0自动中做什么？

下一篇： Safari中的垂直居中

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX