第三種解決方案
#parent {
width: 200px;
height: 600px;
background: #ccc;
position: absolute;
}
#child {
width: 200px;
height: 200px;
background: #c9394a;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto 0;
4 回答
舉報
0/150
提交
取消
#parent {
width: 200px;
height: 600px;
background: #ccc;
position: absolute;
}
#child {
width: 200px;
height: 200px;
background: #c9394a;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto 0;
2019-11-10
舉報
2020-07-17
可以解釋一下嗎？不是很明白原理
2019-12-26
測試了下，這樣就行啦，當然，思路是你們的，我只是測試了下。。。?
#parent {
width: 200px;
height: 600px;
background: #ccc;
position: relative;
}
#child {
width: 200px;
height: 200px;
background: #c9394a;
position: absolute; top: 0; bottom: 0;?
margin: auto 0;
2019-12-10
第三種解決方案
<!DOCTYPE?html>
<html?lang="en">
<head>
??<meta?charset="UTF-8">
??<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
??<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
??<title>測試</title>
??<style>
????.main{
??????width:100px;
??????height:500px;
??????background:?#666;
??????display:?flex;
??????align-items:?center;
????}
????.child?{
??????width:100px;
??????height:100px;
??????background:?red;
????}
??</style>
</head>
<body>
??<div?class="main">
????<div?class="child">
??????11111
??????1111111111
??????11111111111
??????11111111
??????</div>
??</div>
</body>
</html>
2019-11-15
#parent?{width:?200px;height:?600px;background:?#ccc;position:?relative;}#child?{width:?200px;height:?200px;background:?#c9394a;position:?absolute;?left:?0;?top:?0;?right:?0;?bottom:?0;margin:?auto;這里應該是margin:auto? ,不是 margin:auto 0;