親をオーバーフローさせながらdivを水平方向に中央に配置する方法は？

親のパーセンテージの幅があります。私は子供のdivを維持する簡単な方法を探しています：親の中心に：.contrそれは親をオーバーフローしたり、ページをオーバーフローさえしても。私は絶対的なポジショニングを試みましたが、ここではうまくいかないようです。親をオーバーフローさせながらdivを水平方向に中央に配置する方法は？

例：

のアイデア？

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要素を使用すると、DIVは、親の境界のエッジで超えて拡大したくない場合は、親

出典

2017-03-23 sol acyon

はleft:50%とtranslateX(-50%)でposition: absoluteをお試しください：

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>

出典

2017-03-23 19:30:29 user31782

これは今、親divのセンタリングです。私は、親divがそれがどこにあるかのままにしておきたい。 –

@solacyon Done !!!! – user31782

だオーバーフローしたい明確にするために、すべて、あなたが探しているのは.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>

出典

2017-03-23 19:19:21

これが働くだろう。サンプル画像のようにオーバーフローした場合にのみ、私は示しました。これは良い試みですが、 'max-width'が' 100％ 'になっているので、子divがコンテナをオーバーフローすることを排除します。オーバーフローが起こり、それが目に見えるようにしたい。 –

'.contr'と' .expand'のそれぞれに 'left'を設定することで、ボックス自体を中心にして、それをオーバーローにすることができます。ただし、それは左から開始し、 '展開'を集中させます。私は、動的に拡張するオーバーフロー要素をjQueryなしで常にセンタリングすることは可能ではないと思います。 –

多分絶対的な測位の方法が必要です。 –

親をオーバーフローさせながらdivを水平方向に中央に配置する方法は？

答えて

関連する問題