オーバレイの中心を合わせる

Question

私はウェブサイトを持っています：[そのサイトのURLを削除するようになったので、サムネイルの上にオーバーレイが現れます。 Firefoxブラウザでうまく動作していますが、Chromiumブラウザでうまく機能せず、コンテンツdivが左側に向かってより整列しています。誰もがfirebugまたは上のサイトのツールを使用して私に教えてくださいどのようにオーバーレイコンテンツのdivを中心に整列するだけでも、そのFirefoxに来るように？

幅を100％に設定すると固定されますが、高さと同じように幅が自動的に調整されるようにしてください。

私は、次のコードを試してみましたが、それはうまくいきませんでした：

.project-title { 
    max-width: 250px; 
    width: auto; 
    border-radius: 15px; 
    height: auto; 
    opacity: 0.7; 
    color: white; 
    padding-left: 8px; 
    padding-right: 8px; 
    padding-top: 4px; 
    padding-bottom: 4px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin: auto!important; 
    bottom: 0; 
    color: #202020 !important; 
    background-color:#dbdbdb; 
    font-family: Lato !important; 
    font-size: 12pt !important; 
    } 

Answer 1

次の2つの異なる方法で整列を中心にしようとしています。 position:absolute;を使用している場合はmargin:autoを持ってはいけません。何もしません。

divを中央揃えにするには、何百もの方法があります。ここでは2つの単純なものです：

.project-title { 
    position:absolute; 
    left:50%; 
    top:50%; 
    transform:translate(-50%, -50%); 
} 

この：

.project-title { 
    width:250px; 
    margin:0 auto; 
} 

または

.project-title { 
    width:250px; 
    position:absolute; 
    left:50%; 
    margin-left:-125px; 
} 

より高度な方法で、自分のものの残りの部分が設定されている方法に応じて、このようなものですdivの中にそれを中心に配置します。

さらにお手伝いするために、あなたのdivを含むものと予想される動作を知る必要があります。

Answer 2

あなたは.project-titleを絶対的に配置しているため、ページの通常の流れから抜け出しています。したがって、margin: autoトリックは機能しません。以下のような

何かがそれを行うことがあります。

.project-title { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100%; 
    max-width: 250px; 
    transform: translate(-50%, -50%); 
}