                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /一课全面掌握主流CSS布局

第三种解决方案

#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;

杨超越赐我offer

2019-11-10

源自：一课全面掌握主流CSS布局 3-5

关注问题我要回答

723

操作

收起

4 回答

慕田峪5397708
2020-07-17

可以解释一下吗？不是很明白原理

0 回复有任何疑惑可以回复我~

收起回答

ccyy_阿亮

定位元素在包含块中的方程（垂直方向）： top + margin-top + border-top-height + padding-top + height + padding-bottom + border-bottom-height + margin-bottom + bottom = the height of the containing block

2020-12-02 回复有任何疑惑可以回复我~

请再努力一下
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;

0 回复有任何疑惑可以回复我~

收起回答

往事随风_遇见最好的你
2019-12-10

第三种解决方案

<!DOCTYPE html>

<head>

<style>

.main{

width:100px;

height:500px;

background: #666;

display: flex;

align-items: center;

}

.child {

width:100px;

height:100px;

background: red;

}

</style>

</head>

<body>

11111

1111111111

11111111111

11111111

</div>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

前端是我菜
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;

0 回复有任何疑惑可以回复我~

收起回答