tha*_*ore 2 html css centering flexbox
我有一个相当独特的情况，它似乎适用于除Internet Explorer 11之外的所有浏览器，因此这是我试图解决的主要用例。
我工作的一个想法，对于涉及利用网站布局display: flex;上<body>，以适应各种各样的布局情况。具体来说，一个是在一侧有一个“导航栏”，在左侧有一个站点的内容。flex-grow: 1;在内容上使用允许我填充导航栏后面的剩余空间，以及当我必须在某个断点隐藏导航栏时自动填充浏览器窗口的整个宽度。
但是，如果我将 a 添加max-width到内容并尝试使用 将其在剩余空间内居中margin: 0 auto;，它会在Internet Explorer 11 中失败。
/* Code to Troubleshoot
// ----------------- */
body {
display: -webkit-flex;
display: flex;
}
nav {
-webkit-flex-basis: 160px;
flex-basis: 160px;
z-index: 2;
}
main {
-webkit-flex: 1;
flex: 1;
position: relative;
min-width: 1px;
max-width: 400px;
margin: 0 auto;
z-index: 1;
}
/* Presentational Styles
// ------------------ */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-weight: 300;
color: #bbb;
background-color: #eaeaea;
}
nav,
main {
height: 100vh;
background-color: #fff;
box-shadow: 0 0.15em 0.65em rgba(0, 0, 0, 0.15);
}
nav {
counter-reset: linkCount;
}
nav i {
display: block;
border-bottom: 1px solid #eaeaea;
padding: 0.925em 1em;
font-style: normal;
line-height: 1;
}
nav i:before {
counter-increment: linkCount;
content: "Link " counter(linkCount);
}
main:before {
content: "Main Content";
display: block;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}<nav>
<i></i>
<i></i>
<i></i>
</nav>
<main></main>最终，以下所有内容都是我正在努力的方向：
max-width在内容区域上分配一个可选项，并将内容在<body>. 目前，我正在尝试通过margin: 0 auto;内容执行此操作，它似乎适用于除Internet Explorer 11之外的所有浏览器（我尚未在移动设备上进行测试，但所有其他桌面浏览器似乎都正常）。在 flex 布局方面，IE 11 漏洞百出。但通常有办法绕过它们。
在这种情况下，只需对您的main元素进行以下两项调整：
main {
flex: 1 1 auto; /* 1 */
position: relative;
min-width: 1px;
max-width: 400px;
margin: 0 auto;
z-index: 1;
width: 100%; /* 2 */
}
我根据这两篇文章进行了调整：