94

このCSSを持つdivがあります：

#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

さて、どうすればこのdivを中央に配置できますか? 使用できますmargin-left: -450px; left: 50%;が、これは画面が 900 ピクセルを超える場合にのみ機能します。その後 (ウィンドウが 900 ピクセル未満の場合)、ウィンドウは中央に配置されなくなります。

もちろん、ある種のjsでこれを行うことができますが、CSSでこれを行う「より正しい」ものはありますか?

4

5 に答える 5

235

fixedまたはabsolute配置された要素の設定を中央揃えにすることができますrightとleftへ0、次にmargin-left&margin-rightへ配置autoされた要素を中央に配置するかのようにstatic。

#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

この fiddle で動作するこの例を参照してください。

于 2013-06-12T15:55:51.053 に答える
58

transformCSS3 のプロパティを安全に使用できる場合の別の方法を次に示します。

.fixed-horizontal-center
{
    position: fixed;
    top: 100px; /* or whatever top you need */
    left: 50%;
    width: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

...または、水平方向と垂直方向の両方のセンタリングが必要な場合:

.fixed-center
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
于 2015-07-01T23:18:01.777 に答える
8 
<div id="container">
    <div id="some_kind_of_popup">
        center me
    </div>
</div>

容器に包む必要があります。ここにCSSがあります

#container{
    position: fixed;
    top: 100px;
    width: 100%;
    text-align: center;
}
#some_kind_of_popup{
    display:inline-block;
    width: 90%;
    max-width: 900px;  
    min-height: 300px;  
}
于 2013-06-12T15:38:43.943 に答える
8

これは、コンテンツのサイズに関係なく機能します

.centered {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

ソース: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

于 2018-02-01T10:36:07.177 に答える