body上でflexを設定しても、アイテムが上下左右中央に配置できない？
html構造：
コンテンツ
.outerに対してflex配置を行うと、.innerは上下左右中央に配置されます。
.outer { display: flex; align-items: center; justify-content: center; width: 500px; height: 300px; border: 2px solid red;}.inner { width: 100px; height: 100px; text-align:center; border: 1px solid black;}
.innerが.outerの中で上下左右中央に配置されることから、flexは子要素を中央に配置できることがわかります。ここでbodyにもflexを設定してみます。
body { display: flex; align-items: center; justify-content: center; }
この場合、.outerが上下中央に配置されないのはなぜでしょうか？（.wrapperを追加してmarginを設定することで上下左右中央に配置することはできますが、ここではbodyにflexを設定した場合に機能しない理由を問います）
答え：
まず、提示されたコードが正しければ、.bodyはタイプミスがあります。
修正後：
body { display: flex; align-items: center; justify-content: center; }
こうすると.outerは水平方向に中央に配置されるようになりますが、垂直方向には中央に配置されません。これは、
自体に高さがなく、.outerによって高さが設定されているためです。
以上就是为什么body设置flex后，子元素.outer无法上下左右居中？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1557435.html
微信扫一扫 
支付宝扫一扫 
