CSS：上部+左を使用してdivをセンタリングする

-1

したがって、現在はページの中央にdivを中心に配置しています。理想的には、divは高さと幅の両方が50％です。私はトップを使用しています：50％/左：50％の先端とマージンは、高さと幅の半分が-25％になるはずです。それは左のマージンで動作しますが、何らかの理由で、マージンが常に働くとは限りません。-25％とすると、divをページの上にあまりにも遠くに置き、どちらのサイドからも25％離れないようにします。CSS：上部+左を使用してdivをセンタリングする

ページにスクロールがありません。

CSSコード：

body { 
    height:100%; 
} 
.main { 
    position: fixed; 
    width: 50%; 
    min-height: 50px; 
    height: 50%; 
    background-color: #ccc; 
    top: 50%; 
    left: 50%; 
    margin-top: -25%; 
    margin-left: -25%; 
}

HTMLコード：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
     <link rel="stylesheet" type="text/css" href="theme.css"> 
    </head> 
    <body> 
     <div class="main"></div> 
    </body> 
</html>

出典

2017-07-31 Toby King

パーセントのマージンが包含ブロックの幅** **の割合であり、これを試してください。 – Alohci

私のためだけで正常に動作

、多分代わりに負のマージンのtransform: translate(-50%, -50%);を使うのか？

.main { 
position: fixed; 
width: 50%; 
min-height: 50px; 
height: 50%; 
background-color: #ccc; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
}

出典

2017-07-31 15:24:22

5秒で私を打つ！この回答に追加するには、変換が機能する理由は、変換される要素の実際のサイズが考慮されることです。 – disinfor

うーん、それはあなたのために働くことが面白いが、私はちょうど変形の追加を試みたし、それは完全に動作します、ありがとう！ –

@disinforああ、それは意味があると思う、私は推測する、ありがとう –

頂部および底部の

.main { 
    display: flex; 
    justify-content: center; 
    align-item: center; 
}

出典

2017-07-31 15:29:22

CSS：上部+左を使用してdivをセンタリングする

答えて

関連する問題