包装纸宽1170像素 - 可变/全屏高度 子div是%width - 高度可变(尽管我在jsfiddle中指定了px)
我使用了表(父)/ table-cell(子)方法并且不起作用。 保证金0自动似乎也没有做任何事情 - 我不确定它是否与子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;
}
非常感谢任何提示!
答案 0 :(得分:1)
尝试使用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;}
答案 1 :(得分:0)
您还可以padding
使用.wrap
让您的孩子成为其父母的中心。
例如
填充:40vh 0;