谁能解释为什么一个部分没有以我的页面为中心？答案

【问题标题】：Can anyone explain why a section isn't centering on my page?谁能解释为什么一个部分没有以我的页面为中心？
【发布时间】：2017-06-08 21:29:29
【问题描述】：

我正在尝试将页面上的一些元素垂直和水平居中，但由于某种原因，将容器元素设置为具有 auto 边距不会使它们居中。谁能解释一下为什么？

HTML/CSS

body{
	margin: 0;
	padding: 0;
	background-color: rgb(0, 0, 0);
}

#links{
	margin: auto;
}

.link{
	display: inline-block;
	margin: 0 2%;
	width: 15vw;
	height: 15vw;
	border: 2px solid rgb(100, 100, 0);
	border-radius: 50%;
	background-image: url("line.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-color: rgb(0, 0, 50);
}

.link:first-of-type{
	margin-left: 0;
}

.link:last-of-type{
	margin-right: 0;
}

<div id="landingpage">
    <section id="links">
        <div class="link" id="home"></div>
        <div class="link" id="work"></div>
        <div class="link" id="contact"></div>
    </section>
</div>

Pen

【问题讨论】：

标签： html css

【解决方案1】：

因为inline-block 你以text-align 为中心。另外，你的#links 没有宽度，是display: block，所以它是 100% 宽的。

https://codepen.io/anon/pen/GEogXY

body{
	margin: 0;
	padding: 0;
	background-color: rgb(0, 0, 0);
}

#links{
	text-align: center;
}

.link{
	display: inline-block;
	margin: 0 2%;
	width: 15vw;
	height: 15vw;
	border: 2px solid rgb(100, 100, 0);
	border-radius: 50%;
	background-color: rgb(0, 0, 50);
}

.link:first-of-type{
	margin-left: 0;
}

.link:last-of-type{
	margin-right: 0;
}

<div id="landingpage">
    <section id="links">
        <div class="link" id="home"></div>
        <div class="link" id="work"></div>
        <div class="link" id="contact"></div>
    </section>
</div>

【讨论】：

【解决方案2】：

因为您想将链接水平和垂直居中，我建议您使用 flexbox 布局。否则只有使用display: table-cell; vertical-align: middle; 或为固定高度设置边距才能实现垂直对齐。

这里有一个代码笔，它说明了 flexbox 布局的使用。 https://codepen.io/anon/pen/KqVwJp

【讨论】：

【解决方案3】：

对于水平居中，制作 #linksdisplay:inline-block 或给它一个固定的宽度。对于垂直居中，没有简单的方法。让你的父 div position:relative 和 #links position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)。使用表格 AND/OR 表格单元格并不总是好的技术。

【讨论】：

【解决方案4】：

#link{
    margin : auto;
    text-align : center;
}

做以下补充。当您在子元素上应用 display:inline-block 时，它们充当文本并默认以左对齐方式对齐。
但是我所做的会将这个属性传递给所有子元素，所以如果您希望任何子元素左对齐或右对齐，您可以在 CSS 中提及。

【讨论】：

【解决方案5】：

添加此 CSS 应该可以满足您的需要。将display: table 和display: table-cell 与vertical-align: middle 一起使用将允许您将其垂直和水平居中。

#landingpage {
    width: 100%;
    height: 100vh;
    display: table;
    text-align: center;
}

#links{
    margin: auto;
    display: table-cell;
    vertical-align: middle;
}

body{
    margin: 0;
    padding: 0;
    background-color: rgb(0, 0, 0);
}

#landingpage {
    width: 100%;
    height: 100vh;
    display: table;
    text-align: center;
}

#links{
    margin: auto;
    display: table-cell;
    vertical-align: middle;
}

.link{
    display: inline-block;
    margin: 0 2%;
    width: 15vw;
    height: 15vw;
    border: 2px solid rgb(100, 100, 0);
    border-radius: 50%;
    background-image: url("line.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-color: rgb(0, 0, 50);
}

.link:first-of-type{
    margin-left: 0;
}

.link:last-of-type{
    margin-right: 0;
}

<div id="landingpage">
    <section id="links">
        <div class="link" id="home"></div>
        <div class="link" id="work"></div>
        <div class="link" id="contact"></div>
    </section>
</div>

Codepen：https://codepen.io/anon/pen/owbgQp

【讨论】：