包装器为1170px宽 - 变量/全屏高度儿童div是%宽度 - 高度变量(尽管我在JSFIDDLE中指定了PX(
我已经使用了表(parent(/table-cell(child(方法,但这无效。保证金0自动似乎也没有做任何事情 - 我不确定它是否与孩子Divs的相对位置属性有关...
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
使您的孩子处于父母的中心。
例如
填充:40VH 0;