元素水平垂直居中、上边框塌陷问题、清除浮动

牛仔很会忙

于 2022-05-18 18:31:33 发布

阅读量122

点赞数

文章标签： javascript css3 css

本文链接：https://blog.youkuaiyun.com/m0_66970189/article/details/124848257

版权

本文介绍了两种实现元素水平垂直居中的CSS方法：定位加transform和外边距自动填充。同时，针对上边框塌陷问题，提出了几种解决策略，包括添加padding、更改margin为padding、使用overflow隐藏和透明边框等。此外，还讨论了清除浮动的多种方式，如设置高度、overflow隐藏、使用空元素和浮动伪类。这些技巧对于前端开发者优化布局和解决问题至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素水平垂直居中

定位+c3

			position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);

定位+外边距

			position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;

上边框塌陷问题

给父元素添加padding （常用)
将子元素的margin改成父元素的padding
给父元素添加overflow：hidden
给父元素添加透明的border（不建议使用)

清除浮动

给父元素添加高度（在知道高度的情况下）
给父元素添加overflow:hidden;
给子元素添加同级的空元素，设置clear:both;
给父元素添加浮动
使用::after

	.father::after{
	content:"";
	display:block;
	clear:both;
	overflow:hidden;
	
}
```