我想中心一個div在另一個div但不工作？

-1

#first { 
 
    position: relative; 
 
    width: 20%; 
 
    height: 20%; 
 
    border-radius: 50%; 
 
    background-color: #94b8b8; 
 
} 
 
#second { 
 
    position: absolute; 
 
    width: 15%; 
 
    height: 15%; 
 
    border-radius: 50%; 
 
    background-color: blue; 
 
}

<html> 
 

 
<body> 
 
    <div id="first"> 
 
    <div id="second"> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

如何得到它，我想在第一個div的正中心的第二個div，但它甚至不可見。如何在不使用左側頂部屬性的情況下實現此目的注意：我想對齊它只使用CSS但不使用標記。

來源

2016-05-05 mystylecoder

的[水平居中一個div在一個div]可能的複製（http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div） –

請提供小提琴鏈接plz –

有幾種可能做你想做什麼：

.outer { 
 
    background: lightblue; 
 
    width: 300px; 
 
    height: 100px; 
 
} 
 
.inner { 
 
    background: black; 
 
    width: 100px; 
 
    height: 50px; 
 
    color: white; 
 
}

<div class="outer" align="center"> 
 
    <div class="inner"> 
 
    Deprecated (use css) 
 
    </div> 
 
</div> 
 
<br> 
 
<div class="outer"> 
 
    <div class="inner" style="position: relative; left: 50%; margin-left: -50px;"> 
 
    :) 
 
    </div> 
 
</div> 
 
<br> 
 
<div class="outer" style="position: relative"> 
 
    <div class="inner" style="position: absolute; left: 50%; margin-left: -50px;"> 
 
    :) 
 
    </div> 
 
</div> 
 
<br> 
 
<div class="outer"> 
 
    <div class="inner" style="margin: 0 auto;"> 
 
    </div> 
 
</div>

另一種解決方案

.outer { 
    width: 100%; 
    text-align: center; 
} 

.inner { 
    display: inline-block; 
}

來源

2016-05-05 07:15:13

但我不想在html中的對齊屬性。在CSS中有對齊選項？ – mystylecoder

@mystylecoder在這種情況下選擇其他三種解決方案之一 –

與已知寬的中心絕對定位的div，你可以使用這個：

.inner1 { 
    left: 0; 
    right: 0; 
    margin: auto; 
}

或者，如果您需要在水平和垂直居中：

.inner2 { 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
}

如果內部寬度是未知的 - 使用CSS3轉換：

.inner3 { 
    left: 50%; 
    transform: translateX(-50%); 
    top: 0; 

}

Ant進行垂直居中也：

.inner4 { 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 

}

小提琴演示：https://jsfiddle.net/4qxpc0ua/

來源

2016-05-05 07:21:23 Julia

計算頂部和左側位置並將其應用於第二個div。

#first { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    background-color: #94b8b8; 
    } 
    #second { 
    position: absolute; 
    width: 15%; 
    height: 15%; 
    left:42.5%; //50% - (15%/2) 
    top:42.5%; //50% - (15%/2) 
    border-radius: 50%; 
    background-color: blue; 
    }

DEMO

來源

2016-05-05 07:22:52

我想中心一個div在另一個div但不工作？

回答

相關問題