在全屏包装器中垂直居中可变高度 div
Vertically centre variable-height divs within fullscreen wrapper
包装纸的宽度为 1170 像素 - variable/full-screen 高度
子 div 是 % 宽度 - 高度可变(尽管我在 jsfiddle 中指定了 px)
我使用了 table(parent)/table-cell(child) 方法,但它不起作用。
Margin 0 Auto 似乎也没有做任何事情 - 我不确定它是否与子 div 的相对位置属性有关...
https://jsfiddle.net/x3cm32my/
.wrap {
background: grey;
margin-left: auto;
margin-right: auto;
width: 1170px;
min-height: 100vh;
vertical-align: middle;
text-align: left;
display: table;
}
.mod-left {
background: blue;
margin:0 auto;
width: 30%;
height: 100px;
float: left;
vertical-align: middle;
position: relative;
display: table-cell;
}
.mod-right {
background: green;
margin:0 auto;
width: 65%;
float: right;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 150px;
position: relative;
}
如有任何提示,我们将不胜感激!
试试 flexbox 怎么样?要使您的内容居中,请使用以下内容:
.wrap { background: grey; margin-left: auto; margin-right: auto; width: 1170px; min-height: 100vh; text-align: left; display: flex; justify-content: center; align-items: center;}
您还可以在 .wrap
使用 padding
使您的 child 位于他们 parent 的中心。
例如
padding: 40vh 0;
包装纸的宽度为 1170 像素 - variable/full-screen 高度 子 div 是 % 宽度 - 高度可变(尽管我在 jsfiddle 中指定了 px)
我使用了 table(parent)/table-cell(child) 方法,但它不起作用。 Margin 0 Auto 似乎也没有做任何事情 - 我不确定它是否与子 div 的相对位置属性有关...
https://jsfiddle.net/x3cm32my/
.wrap {
background: grey;
margin-left: auto;
margin-right: auto;
width: 1170px;
min-height: 100vh;
vertical-align: middle;
text-align: left;
display: table;
}
.mod-left {
background: blue;
margin:0 auto;
width: 30%;
height: 100px;
float: left;
vertical-align: middle;
position: relative;
display: table-cell;
}
.mod-right {
background: green;
margin:0 auto;
width: 65%;
float: right;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 150px;
position: relative;
}
如有任何提示,我们将不胜感激!
试试 flexbox 怎么样?要使您的内容居中,请使用以下内容:
.wrap { background: grey; margin-left: auto; margin-right: auto; width: 1170px; min-height: 100vh; text-align: left; display: flex; justify-content: center; align-items: center;}
您还可以在 .wrap
使用 padding
使您的 child 位于他们 parent 的中心。
例如
padding: 40vh 0;