我希望我的<p>元素位于容器的中心<div>,就像完美居中一样 - 顶部,底部,左侧和右侧边距平均分割空间.
我怎样才能做到这一点？
div {
width: 300px;
height: 100px;
}
p {
position: absolute;
top: auto;
}<div>
<p>I want this paragraph to be at the center, but it's not.</p>
</div>我正在阅读这个网站的一个关于中心元素技术的指南.
我读了CSS代码,
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
我也读了解释.
但我不明白的是解释"top:0; left:0; bottom:0; right:0;"的部分.
它说,
设置顶部:0; 左:0; 底部:0; 右:0; 为浏览器提供一个新的边界框.此时,块将填充其偏移父级中的所有可用空间,即父体或位置:相对; 容器.Developer.mozilla.org:对于绝对定位的元素,top,right,bottom和left属性指定元素包含块边缘的偏移量(元素相对于的位置).
这是什么意思？包围盒？填写所有可用空间？
"top:0; left:0; bottom:0; right:0;"如何？工作？它是否需要盒子的四个边并伸展它们以填充容器？这是价值观的运作方式吗？
当我设置"top:0; left:0; bottom:0; right:0;"时实际发生了什么？
我完全迷失在这个解释中,我希望有人能够以更简单易懂的方式对我进行改写,重述和解释.
谢谢.
正如标题所说,transform:translate(x,y)和position:relative之间有什么区别.
既然它们都完成了同样的事情(位置元素),那么它们在目的和应用方面有何不同？
我读了一篇关于使用"transform:translate;"来定位元素的文章.由于GPU和优化原因,最好使用"转换",但我没有真正看到问题,因为如果你只是重新定位一个元素而不是动画它,那么它不是什么大问题.
那么最后,它们如何不同以及以何种方式存在？
我试图理解 CSS 上的图像精灵，一行代码看起来像这样。
#navlist li, #navlist a{height:44px;display:block;}
我只是想知道 display:block 对 "a" 有什么影响，我知道它是针对 "a" 标签的，因为如果我删除了 "a" 链接将不起作用，相反如果我删除了 "display:block" ，我只是想知道为什么它应该是“显示：块”。