答案 0 :(得分:2)
通过合并边距和翻译:
首先,使用margin-top: 50%;
在div上方创建50%的页面高度空间。现在,div 开始在页面中间。
但是那太远了,您不知道高度,如何纠正?通过使用翻译。
保证金是指父对象(在这种情况下为主体),翻译是指对象的大小(#example
)
#example{
margin-top: 50%;
transform: translateY(-50%);
/* And now you figure out how to use the same trick on the X-axis */
}
一些演示值可以使它变得更加明显:
document height Element height -> 50% margin in px -50% translate in px
800px 250px -> 400px -125px
800px 150px -> 400px - 75px
1000px 150px -> 500px - 75px
此方法的好处:当您添加任何值填充时,以及以后决定设置一些固定值时,它都可以正常工作。
答案 1 :(得分:1)
解决这个问题的方法很少。
position: absolute
,transform: translate
。
.parent {
position: relative;
height: 500px;
width: 500px;
background: green;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: red;
}
<div class="parent">
<div class="child">
Content
</div>
</div>
display: flex; align-items: center; justify-content: center;
(父级)。
.parent {
display: flex;
align-items: center;
justify-content: center;
height: 500px;
width: 500px;
background: green;
}
.child {
background: red;
}
<div class="parent">
<div class="child">
Content
</div>
</div>
答案 2 :(得分:0)
使用Flexbox。
Flexbox允许使用父元素上的align-items
属性,使元素垂直对齐,而不管元素的大小如何。 justify-content
使水平居中变得容易。
有关flexbox的所有内容的良好指南在这里:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
在这里查看我的示例:http://jsfiddle.net/srn4opqL/或:
HTML:
<div class="flex-container">
<div class="greenbox">Some arbitrary content<br> that will set the dimensions of the div</div>
</div>
CSS:
.flex-container{
width: 100%;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.greenbox {
background: limegreen;
text-align: center;
padding: 2em;
}
关于供应商前缀。我在以下位置使用了该工具:https://autoprefixer.github.io/设置为“最后3个版本”。