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

The parent has a percentage width. I'm looking for a simple way to keep the child div: .wrp centered in it's parent: .contr even when it overflows the parent or even overflowing the page. I tried absolute positioning but it doesn't seem to work here.

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

Example:

Ideas?

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>

Edit: To clarify I want the child div to overflow it's parent

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

2 个解决方案

#1

Try position: absolute with left:50% and translateX(-50%):

尝试位置:绝对左边:50%和translateX(-50%):

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%)

<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>

#2

If you don't want the DIV to expand past the edge of the parent's bounds at all, what you're looking for is to set max-width: 100% on .v-cntr:

如果你不希望DIV扩展到父边界的边缘,你要找的是在.v-cntr上设置max-width:100%:

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>

Hope this helps! :)

希望这可以帮助! :)

#1