如何居中 div,如何居中一个浮动元素

天天有嘎嘎吃

于 2021-09-08 17:38:19 发布

阅读量160

点赞数

文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/m0_57308879/article/details/120183900

版权

本文介绍了两种CSS布局技巧：如何使用`margin: 0 auto`使固定宽度的div水平居中，以及如何通过相对定位和负外边距实现浮动元素的居中对齐。示例代码详细展示了具体实现方法，帮助开发者更好地理解和应用这些布局策略。

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

给 div 设置一个宽度，然后添加 margin:0 auto 属性
div{
    width:200px;
    margin:0 auto;
}

居中一个浮动元素
确定容器的宽高 宽 500 高 300 的层
设置层的外边距
.div {
    Width:500px ; 
    height:300px;//高度可以不设
    Margin: -150px 0 0 -250px;
    position:relative;//相对定位
    background-color:pink;//方便看效果
    left:50%;
    top:50%;
}