Question

父级具有百分比宽度。我正在寻找一种简单的方法来保持子div：.wrp集中在它的父级：.contr，即使它溢出父级或甚至溢出页面。我试过绝对定位，但它似乎不适用于此。

示例：

想法？

body {
  overflow: hidden;
  padding: 5%;
  text-align: center;
}

.contr {                                                 /* << contr = Container */
  width: 40%;
  height: 95%;
  background-color: #eee;
}

.wrp {                                                       /* << wrp = Wrapper */
  width: 5rem;
  height: 5rem;
  margin: auto;
  background-color: #bbb;
  opacity: 0.75;
}

.expand {
  animation-name: expand;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes expand {
  50% {
    width: 30rem;
  }
}

<head>
  <style>
    @import url( 'https://necolas.github.io/normalize.css/latest/normalize.css' );
    
    * {
      box-sizing: border-box;
      outline: 1px solid #555;
    }
    
    .v-cntr {                               /* << v-cntr = Vertically Centered */
      position: relative;
      top: 50%;
      transform: translateY( -50% );
    }
    
    html, body {
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="contr v-cntr">        
    <div class="wrp v-cntr expand">
      stay<br>centered in<br>parent
    </div>
  </div>
</body>

编辑：澄清我希望子div溢出它的父级

Answer 1

使用position: absolute和left:50%：

尝试translateX(-50%)

＆＃13;

body {
  overflow: hidden;
  padding: 5%;
  text-align: center;
}

.contr {                                                 /* << contr = Container */
  height: 95%;
  width: 40%;
  background-color: #eee;
}

.wrp {                                                       /* << wrp = Wrapper */
  width: 5rem;
  height: 5rem;
  margin: auto;
  background-color: #bbb;
  opacity: 0.75;
}

.expand {
  animation-name: expand;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes expand {
  50% {
    width: 30rem;
  }
}

/*new*/  


.wrp.v-cntr {
  position: absolute;
  left: 50%; 
  transform: translate(-50%, -50%)

＆＃13;

<head>
  <style>
    @import url( 'https://necolas.github.io/normalize.css/latest/normalize.css' );
    
    * {
      box-sizing: border-box;
      outline: 1px solid #555;
    }
    
    .v-cntr {                               /* << v-cntr = Vertically Centered */
      position: relative;
      top: 50%;
      transform: translateY( -50% );
    }
    
    html, body {
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="contr v-cntr">        
    <div class="wrp v-cntr expand">
      stay<br>centered in<br>parent
    </div>
  </div>
</body>

＆＃13;

Answer 2

如果您不希望DIV完全超出父级边界的边缘，那么您需要的是在max-width: 100%上设置.v-cntr：

body {
  overflow: hidden;
  padding: 5%;
  text-align: center;
}

.contr {                                                 /* << contr = Container */
  height: 95%;
  width: 40%;
  background-color: #eee;
}

.wrp {                                                       /* << wrp = Wrapper */
  width: 5rem;
  height: 5rem;
  margin: auto;
  background-color: #bbb;
  opacity: 0.75;
}

.expand {
  animation-name: expand;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes expand {
  50% {
    width: 30rem;
  }
}

<head>
  <style>
    @import url( 'https://necolas.github.io/normalize.css/latest/normalize.css' );
    
    * {
      box-sizing: border-box;
      outline: 1px solid #555;
    }
    
    .v-cntr {                               /* << v-cntr = Vertically Centered */
      max-width: 100%;
      position: relative;
      top: 50%;
      transform: translateY( -50% );
    }
    
    html, body {
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="contr v-cntr">        
    <div class="wrp v-cntr expand">
      stay<br>centered in<br>parent
    </div>
  </div>
</body>

希望这有帮助！：）

如何在溢出父级时将div水平居中于其父级？

2 个答案: