仅将div中的两个元素之一居中？ [复制]
Posted
技术标签:
【中文标题】仅将div中的两个元素之一居中？ [复制]【英文标题】：Center only one of two elements in a div? [duplicate] 【发布时间】：2018-04-02 01:14:51 【问题描述】：我有一个简单的网页，其中包含一个 .topnav 栏和一个 .container，其中包含一些元素。我试图在页面的body 内仅将.container 居中，而不是.topnav，以便它垂直居中。但是，当我尝试使用以下方式设置 body 样式时：
display:flex;
align-items:center;
justify-content:center;
.topbar 和 .container 都居中。如何将 .container 垂直居中？
body,
html
height: 100%;
.contact_box
text-align: center;
background-color: red;
border: 1px solid #c0c0c0;
border-radius: 5px;
height: 20em;
width: 25em;
box-shadow: 1px 1px 6px #757677;
float: left;
.contact_box img
margin-top: 3.3em;
margin-bottom: 1.2em;
height: 3em;
width: 3em;
.contact_box h3
color: #6d6d6d;
#contact .container
display: flex;
align-items: center;
justify-content: center;
<body id="contact">
<div class="topnav" id="myTopnav">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="#" class="selected">Contact</a>
<a class="icon" onclick="myFunction()">☰</a>
</div>
<div class="container">
<div class="row" id="contact_section">
<div class="contact_box" class="col-md-4">
<a href="https://github.com/" target="_blank"><img src="resources/github_logo.png" ></a>
<br>
<h3>GitHub</h3>
</div>
<div class="contact_box" class="col-md-4">
<a href="https://www.linkedin.com" target="_blank"><img src="resources/linkedin_logo.png" ></a>
<h3>LinkedIn</h3>
</div>
<div class="contact_box" class="col-md-4">
<img src="resources/email_icon.png" >
<h3>Email</h3>
</div>
</div>
</div>
</body>现在是这样的：
【问题讨论】：
由于您不希望 flexbox 行为出现在导航栏上，最简单的解决方案可能是不将导航栏放在 flexbox 中。 导航栏看起来不像在弹性框中。只有.container 设置为display:flex。我很困惑。
啊，你是对的@showdev。我也很困惑——Nezdiro，你能澄清一下你在问什么吗？您在此处发布的代码 sn-p 与您对问题所在的描述不符...
@DanielBeck 它似乎没有在代码 sn-p 结果中显示，因为页面不大于元素，但在我的网页上，contact_section 直接显示在导航栏，不在页面上垂直居中。我将发布一个可能有助于澄清的屏幕截图。
【参考方案1】：
Hi 在页面中间垂直对齐，设置容器高度为视口的 100%：
#contact .container
height:100vh;
display:flex;
align-items:center;
justify-content:center;
【讨论】：
我喜欢这个答案！唯一的问题是现在整个主体大于视口的高度，所以当我向下滚动到导航栏下方时，这些框只会看起来居中。导航栏的高度是 68px，我尝试将.container 的顶部设置为 -68px，但这似乎没有任何影响。【参考方案2】：
我想我明白了你在寻找什么： 页面顶部的标题和下方的正文，正文内容垂直居中。
下面的示例中有三个弹性系统：
第一个将<body> 设置为具有两个项目的垂直弹性容器：.topnav 和.container。这些项目以justify-content: flex-start 对齐到弹性容器的开头（无论如何这是默认值），并且允许.container 增长以用flex-grow:1 填充弹性容器。
第二个将.container 设置为垂直伸缩容器，每个.row 作为一个项目。项目分别以justify-content: center 和align-items: center 垂直和水平居中。
第三个将.row 元素设置为水平弹性容器（flex-direction: row 是默认值），每个.contact_box 作为一个项目。项目以justify-content: center 水平居中。
html
height: 100%;
body
margin: 0;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
.container
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.row
display: flex;
flex-direction: row;
justify-content: center;
.contact_box
background-color: red;
border: 1px solid #c0c0c0;
border-radius: .5em;
box-shadow: 1px 1px 6px #757677;
padding: 1em 2em;
text-align: center;
.contact_box h3
margin: .25em 0 0;
<div class="topnav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#" class="selected">Contact</a>
<a class="icon">☰</a>
</div>
<div class="container">
<div class="row">
<div class="contact_box">
<a href="https://github.com/" target="_blank"><img src="resources/github_logo.png" ></a>
<br>
<h3>GitHub</h3>
</div>
<div class="contact_box">
<a href="https://www.linkedin.com" target="_blank"><img src="resources/linkedin_logo.png" ></a>
<h3>LinkedIn</h3>
</div>
<div class="contact_box">
<img src="resources/email_icon.png" >
<h3>Email</h3>
</div>
</div>
</div>像这样，每个 flex 系统都有不同的颜色：
如果你添加了另一个.row，它可能看起来像这样：
【讨论】：
以上是关于仅将div中的两个元素之一居中？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
如何在 100% 宽度的 div 内水平居中绝对定位的元素？ [复制]