从顶部和中心放置内容将其对齐在高度和宽度为100％的包装div中

Question

我需要将内容从顶部开始放在另一个下方，并将中心对齐。

我尝试将所有行定位为绝对并制作 顶部：20％，顶部：40％，顶部：60％和边距：0自动不起作用。所以我必须为所有三行留下左边的百分比。

当我减少浏览器的宽度时看起来很垃圾，当我减少浏览器的高度时， divs 相互重叠

我不希望溢出：自动或溢出-y：滚动。我希望将内容放置在100％高度的包装器中并完美居中。如何实现这一点并建议我如何在媒体查询中完成？

HTML

<div id="wrapper">
<div id="row1">Long Text</div>
<div id="row2">Long Text</div>
<div id="row3">Long Text</div>
</div>

CSS

html,body{
    height: 100%;
    width: 100%;
}

#wrapper{
    height: 100%;
    width: 100%;
}

#row1{
    height: 200px;
    width: 600px;
}

#row2{
    height: 400px;
    width: 800px;
}

#row3{
    height: 200px;
    width: 500px;
}

Answer 1

请这样做

＆＃13;

＆＃13;

html,body{
    height: 100%;
    width: 100%;
}
body{background: #333;}
#wrapper{
    height: 100%;
    width: 100%;
    display: table;
}
.w1{
    display: table-cell;
    vertical-align: middle;
}
#row1{
    height: 50px;
    width: 600px;
    background: #fff;
    margin: 0 auto;
}

#row2{
    height: 100px;
    width: 800px;
        background: #fff;
    margin: 10px auto;
}

#row3{
    height: 50px;
    width: 500px;
        background: #fff;
    margin: 0 auto;
}

＆＃13;

<div id="wrapper">
<div class="w1">
    <div id="row1">Long Text</div>
<div id="row2">Long Text</div>
<div id="row3">Long Text</div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

当我减少浏览器的宽度和减少时，它看起来很垃圾   浏览器的高度div相互重叠

使用百分比单位（或vw）代替像素。

  

我希望将内容放置在100％高度的包装器中   完美地居中

在容器上使用flex，并在子容器上使用适当的宽度和高度。

示例代码段：

html, body {
    box-sizing: border-box;
    margin: 0; padding: 0;
    height: 100%; width: 100%;
}
#wrapper {
    height: 100%; width: 100%;
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    justify-content: space-around; /* to distribute space evenly around */
}
#wrapper > div { background-color: #ddd; }
#row1 { flex: 0 0 20%; width: 50%; } /* 0 0 means cannot grow cannot shrink */
#row2 { flex: 0 0 10%; width: 80%; }
#row3 { flex: 0 0 40%; width: 65%; }

<div id="wrapper">
    <div id="row1">Long Text</div>
    <div id="row2">Long Text</div>
    <div id="row3">Long Text</div>
</div>

示例小提琴：http://jsfiddle.net/j3js87fc/1/

---

更新

或者，您可以在row2上使用适当的上/下边距，以便在行之间产生不同的间隙。

示例2 ：

html, body {
    box-sizing: border-box;
    margin: 0; padding: 0;
    height: 100%; width: 100%;
}
#wrapper { height: 100%; width: 100%; }
#wrapper > div { background-color: #ddd; }
#row1 { height: 20%; width: 50%; margin: auto; } 
#row2 { height: 10%; width: 80%; margin: 3% auto 7% auto; }
#row3 { height: 40%; width: 65%; margin: auto; }

<div id="wrapper">
    <div id="row1">Long Text</div>
    <div id="row2">Long Text</div>
    <div id="row3">Long Text</div>
</div>

示例小提琴：http://jsfiddle.net/j3js87fc/4/

Answer 3

你走了： http://jsfiddle.net/oh36f1zb/4/

left:50%; transform: translateX(-50%);可以解决所有问题。