html - 为什么 margin auto in flex 使垂直和水平居中

标签 html css flexbox

<分区>

这里有一道 CSS 题,如果我们把 margin: auto 放在正常的流中,只有左右边距空间被平均。但是,如果我们将 'margin: auto` 放在一个 flex item 上,这个 item 在水平和垂直方向上都居中,这是为什么呢?

代码如下:

#one {
    width:300px;
    height:300px;
    border:solid 2px black;
    margin:auto;
    display:flex;
}

#two {
    width:100px;
    height:100px;
    background:red;
    margin:auto;
}
<div id = "one">
 <div id ="two"></div> 
</div>

期待任何输入!

最佳答案

flex的功能是根据父div的高宽计算各个方向的边距,

  1. 高宽300px的div#one

  2. 高宽为100px的div#two

因此边距计算为 margin:100px;

这意味着

#two{
margin-top:100px;
margin-right:100px;
margin-bottom:100px;
margin-left:100px;
}

如果您只需要水平边距,则使用 margin:0 auto;

关于html - 为什么 margin auto in flex 使垂直和水平居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48004437/

相关文章:

html - 字体很棒 - 图标周围有两个圆圈

css - flexbox 可以水平和垂直居中图像而不拉伸(stretch)它们吗?

html - 如何使内联 block 正确对齐

javascript - 使用 AJAX 登录与完整表单提交(重新加载完整页面)

javascript - 使用 JavaScript 进行表单验证。没有返回期望的结果

javascript - 自定义文件夹浏览器/上传文件对话框

javascript - 将 div 分为 3 列

javascript - 应用文本装饰 : line through to generated checkboxes

javascript - UIWebView scrollTo 应该表现流畅

html - Flexbox:在屏幕中间居中元素