とよりインテリジェントdivの私は、次のコードを持つオブジェクトを中心としている：私は、マージントップを使用して、オブジェクトのサイズの半分を減算する左が、その大きさは次のように与えられていセンターCSS
.object {
width: 70%;
height: 70%;
position: absolute;
top: 50%;
left:50%;
/* these are the lines to which I will refer */
margin-top: -350px;
margin-left: -350px;
}
パーセンテージ。だから私の質問は、私はボックスのサイズを変更するたびに手動でそれらを変更する必要はありませんので、これらの余白を割り当てる方法があるのですか？
フレックスを使用する必要があります。
HTML
<body>
<div class="square"></div>
</body>
CSS 多く方法の
body{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.square{
width: 200px;
height: 200px;
background-color: red;
}
1 - 要素を中央にtransformプロパティを使用する - デモ下記参照：
.object {
width: 70%;
height: 70%;
position: absolute;
top: 50%;
left:50%;
border: 1px solid red;
transform:translate(-50%, -50%);
}<div class="object">Two</div>.main_div{
width:200px;
height:200px;
border:thin black solid;
position:relative;
}
.main_div .object {
width: 70%;
height: 70%;
position: absolute;
transform:translate(-50%, -50%);
top: 50%;
left:50%;
border: thin red solid;
}<div class="main_div">
<div class="object">Object Div Text</div>
</div>この情報がお役に立てば幸いです。
私には、transform:translateプロパティを使用することをお勧めします。
.object {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
もうwidth/2とheight/2マージンを計算taの必要はありません。
そして、あなたはSASSを使用している場合は、ここで使用する魔法@mixinです：次に
@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
@mixin center($position: "both") {
position: absolute;
@if $position == "vertical" {
top: 50%;
@include transform(translateY(-50%));
}
@if $position == "horizontal" {
left: 50%;
@include transform(translateX(-50%));
}
@if $position == "both" {
top: 50%;
left: 50%;
@include transform(translate(-50%, -50%));
}
}
、margin: 0 autoを使用しないのはなぜ単に
.object {
// both vertical and horizontal
@include center;
// only vertical
@include center(vertical);
// only horizontal
@include center(horizontal);
}
ミックスインをありがとう、間違いなくこれを盗んだ。 – Lansana
ようこそ。ギフトとしてそれを考えます:) –
を使うのか？
.object {
width: 70%;
height: 70%;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:0 auto;
}
あなたはマージントップ及びマージン左に％を使用することができ、あなたはここで働いて、それを見ることができます。 https://www.w3schools.com/cssref/playit.asp?filename=playcss_margin-top&preval=10%25 –
これらの金額を計算するためにjQueryを書くことができます。 –