套层居中问题？

Question

<div id="one" style="width: 500px; height: 800px;">
  <div id="two" style="width: 1024px; height: 1024px; background:url('...')">
    <div id="three" style="width: 300px; height: 600px; mrgin: 0 auto;"></div>
  </div>
</div>

蓝色：one
红色：two
黄色：three

two被#one overflow:hidden; 如何实现 #two在#one里居中呐？

Answer 1

1: 定位: 把one设为position: relative;
two:的属性如下

position: absolute;
    // 这个100px 是你two的宽度的一半, 你根据实际情况自己改一下
    left: calc(-100px + 50%); 
    top: 0;

2: 背景, 你想把two做成背景图么?
用背景的属性background-position: center; 可以做到背景居中