绝对位置在div的中心

Question

大家好，在将位置设置为绝对值后，我无法将div居中显示在屏幕中央，由于浏览器的兼容性，我不想使用flexbox

<style>div{
height:200px;
width: 300px;
display:inline-block;
position: absolute;
background-color:red;
}
</style>
<div>
some content
</div>

https://codepen.io/anon/pen/KqWYQg

Answer 1

加上left:50%和top:50%再加上transform:translate(-50%, -50%) 。

这将使元素水平和垂直居中。 这对于响应式设计也很有用，因为即使您调整浏览器的大小，该元素也将保持居中状态

 div { height: 200px; width: 300px; display: inline-block; position: absolute; background-color: red; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

 <div> some content </div> 

Answer 2

您可以使用跨浏览器（在IE8中有效）的“ 绝对水平和垂直居中” ，并且非常简单：

 html, body { height: 100%; margin: 0; } div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: 200px; width: 300px; background-color: red; margin: auto; } 

 <div> some content </div> 

Answer 3

您需要添加left: 50%; ， top: 50%; 并transform: translate(-50%, -50%); 。 不要忘记使用前缀来跨浏览器兼容性。

 div { height: 200px; width: 300px; position: absolute; background-color: red; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 

 <div> some content </div> 

Answer 4

 div{ height:200px; width: 300px; display:inline-block; position: absolute; background-color:red; left:50%; transform: translateX(-50%); } 

 <div> some content </div> 

使用其他浏览器的兼容性