边距：自动；不垂直居中 div [重复]
Posted
技术标签:
【中文标题】边距：自动；不垂直居中 div [重复]【英文标题】：margin: auto; doesn't center div vertically [duplicate] 【发布时间】：2021-04-15 02:12:15 【问题描述】：我想在其li 容器中将我的锚文本（水平和垂直）居中。
我了解到我可以通过在容器上使用 text-align: center; 来轻松地将它们居中。
但要将它们垂直居中，我需要将li 显示为表格，将a 显示为表格单元格。
我不喜欢这种方法，所以我将锚文本放入div 并尝试将div 与margin: auto; 居中。由于某种原因，这仅在水平方向上有效，即使div 是具有定义高度的块元素。有谁知道原因吗？
html
box-sizing: border-box;
*
box-sizing: inherit;
margin: 0;
padding: 0;
nav ul
display: flex;
list-style: none;
justify-content: center;
align-items: center;
height: 4em;
background-color: #783F27;
nav ul li a
display: block;
border: solid medium;
border-radius: 0.4em;
margin: 0 0.5em;
width: 7em;
height: 3em;
color: goldenrod;
a div
width: max-content;
height: max-content;
margin: auto;
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav>
<ul>
<li><a href=""><div>Menu</div></a></li>
<li><a href=""><div>News</div></a></li>
<li><a href=""><div>About</div></a>
<li><a href=""><div>Contact</div></a></li>
</ul>
</nav>
</header>
</body>
</html>【问题讨论】：
其实不行，不行。我删除了div 并将text-align: center; 应用到li 和vertical-align: middle; 到a。我不知道为什么，但是vertical-align 将文本移动了一点点，非常非常一点点。
查看 flexbox 方法.. 非常简单
是的，使用 flexbox 很简单，但不是也没有效率吗？每当我想将一个文本词居中时，是否应该创建一个 flexbox 容器？
为什么不呢？它是如何低效的，您可以引用任何来源吗？基本上只有 3 行文字，反正你会写的
flexbox 有什么问题？ flexbox 是一种非常简单有效的垂直对齐内容的方法。但在你的情况下，我会使用 padding 来居中我的链接（见下面的答案）。这样反应更灵敏！
【参考方案1】：
您可以再次使用 flexbox - 就像您对 ul 所做的那样！
将.nav ul li a 显示为弹性框，然后使用align-items: center; 将链接垂直居中。
你的固定密码：
html
box-sizing: border-box;
*
box-sizing: inherit;
margin: 0;
padding: 0;
nav ul
display: flex;
list-style: none;
justify-content: center;
align-items: center;
height: 4em;
background-color: #783F27;
nav ul li a
display: flex;
align-items:center;
border: solid medium;
border-radius: 0.4em;
margin: 0 0.5em;
width: 7em;
height: 3em;
color: goldenrod;
a div
width: max-content;
height: max-content;
margin: auto;
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav>
<ul>
<li><a href=""><div>Menu</div></a></li>
<li><a href=""><div>News</div></a></li>
<li><a href=""><div>About</div></a>
<li><a href=""><div>Contact</div></a></li>
</ul>
</nav>
</header>
</body>
</html>【讨论】：
是的，我知道，但我不想制作一个 flex 容器只是为了对齐一个文本单词。无论如何，我想知道为什么margin: auto 不起作用。不过还是谢谢你的回答！
为什么不使用flexbox 将文本居中？您不能使用 margin: auto 垂直居中相对对象，这仅适用于绝对/固定对象。【参考方案2】：
另一种选择是删除绝对链接的height 和width 并改用padding。
html
box-sizing: border-box;
*
box-sizing: inherit;
margin: 0;
padding: 0;
nav ul
display: flex;
list-style: none;
justify-content: center;
align-items: center;
height: 4em;
background-color: #783F27;
nav ul li a
display: block;
border: solid medium;
border-radius: 0.4em;
margin: 0 0.5em;
color: goldenrod;
padding: .75em 2em;
a div
width: max-content;
height: max-content;
margin: auto;
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav>
<ul>
<li><a href=""><div>Menu</div></a></li>
<li><a href=""><div>News</div></a></li>
<li><a href=""><div>About</div></a>
<li><a href=""><div>Contact</div></a></li>
</ul>
</nav>
</header>
</body>
</html>【讨论】：
以上是关于边距：自动；不垂直居中 div [重复]的主要内容，如果未能解决你的问题，请参考以下文章