Question

我在水平和垂直方向上居中都有点麻烦。我已经快速浏览了一下，并没有真正理解其他答案，所以我想我会发表自己的问题。

我要做的是将文本水平和垂直放在文本中心，但是我需要容器div来保持窗口的大小。

这是我遇到麻烦的CSS。

body{margin:0 auto;}

div#section1 {height: 100vh;background: black;}

另外，这里是JSFiddle的链接，由于某些原因我无法在此处发布HTML，“发布”按钮会变灰。

由于

Answer 1

相同：使用vertical-align: middle。

body {
    margin:0 auto;
    color:white;
    width: 100%;
    display: table;
}
div#section1 {
    height: 100vh;
    background: black;
    display: table-cell;
    vertical-align: middle;
}
.center {
    text-align: center;
}

<强> Working Fiddle

Answer 2

您需要做的就是使用下面的代码块margin: auto; important 那里。休息，玩CSS定位将为您完成工作。

我认为这里没有太多要解释的内容，只需确保对容器元素使用position: relative;，以便absolute定位元素保持正确

div#section1 {
    height: 20vh;
    background: black;
    width: 20vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

Demo

你可以在这里引用my other answer，这将解释你实现垂直对齐的其他一些技巧，因为使用margin: auto;

可以很容易地保持水平

垂直和水平居中的问题

2 个答案: