当父母小于那个孩子时，在它的父母中水平居中

Question

基本上是标题。我想把一个孩子放在它的父母中心，但孩子比父母大。我怎么能这样做？

＆＃13;

＆＃13;

#cont {
  width: 30%;
  padding-top: 30%;
  background-color: red;
  margin: auto;
}

#main {
  width: 130%;
  padding-top: 30%;
  background-color: blue;
  margin: auto;
}

＆＃13;

<div id="cont">
  <div id="main"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

基本上你的造型你可以做到这一点。如果这是你的意思

#cont{
  width:30%;
  padding-top:30%;
  background-color:red;
    margin: 0 auto;
    position: relative;

}

#main{
  width:130%;
  padding-top:30%;
  background-color:blue;
  text-align:center;
  position: absolute;
  top:35%;
  left: 0;
  z-index: 10;
}

<div id="cont">
<div id="main"></div>
</div>

Answer 2

position: absolute;和left:0;right:0;与margin: auto; 你可以适合你的规则来实现这个

＆＃13;

＆＃13;

.outer
{
    width: 400px;
    height: 400px;
    background: red;
    margin: 0 auto;
    
}
.inner
{
    width: 600px;
    height: 200px;
    background: blue;
    position: absolute;
    left:0;right:0;
    margin: auto;
}

＆＃13;

<div class="outer">
    <div class="inner"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

喜欢这个？仅使用transform: translate和position:absolute

水平居中

#cont {
  width: 30%;
  padding-top: 30%;
  background-color: red;
  margin: auto;
  position: relative;
}

#main {
  width: 130%;
  padding-top: 30%;
  background-color: blue;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

<div id="cont">
  <div id="main"></div>
</div>

Answer 4

如果你的div比你的div大30％，你可以给它一个-15％左边的边距

＆＃13;

＆＃13;

#cont{
  width:30%;
  padding-top:30%;
  background-color:red;
  margin:auto;
}

#main{
  width:130%;
  padding-top:30%;
  background-color:blue;
  margin:auto;
  text-align:center;
  margin-left: -15%;
}

＆＃13;

<div id="cont">
<div id="main"></div>
</div>

＆＃13;

＆＃13;

＆＃13;