Clever Geek Handbook

How to horizontally center a div inside its parent on parent overflow?

The parent has a percentage width. I'm looking for an easy way to keep the child div: .wrp

centered on parent: .contr

even when it overflows the parent or even overflows the page. I've tried absolute positioning but it doesn't seem to work.

Example:

enter image description here

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>
Run codeHide result


Edit: To clarify, I want the child div to overflow the parent

+3


source to share


2 answers


Try position: absolute

with left:50%

and 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>
Run codeHide result


+1


source


If you don't want the DIV to expand beyond the bounds of the parent borders, then you need to set max-width: 100%

to .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>
Run codeHide result


Hope this helps! :)

0


source






More articles:


All Articles