居中，等高，负边距

最新推荐文章于 2018-07-19 22:53:27 发布

Strugglin

最新推荐文章于 2018-07-19 22:53:27 发布

阅读量254

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： web

本文链接：https://blog.youkuaiyun.com/Strugglin/article/details/80502254

HTML 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了使用CSS实现常见网页布局的方法，包括如何让元素在容器内水平垂直居中，以及如何使多个不同高度的元素等高显示。这些技巧对于前端开发者来说非常实用。

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

一些常用的基本样式总结

当由内容撑开的div水平垂直居中

<style>
    * {
        padding:0px;
        margin:0px;
    }
    .contianer {
        width: 600px;
        height: 300px;
        border: 1px solid red;
        position:relative;
    }
    .item {
        background-color: gray;
        position: absolute;
        top:50%;
        left: 50%;
        transform:translate(-50%,-50%);  //X Y 这个是相对于自身的50%
    }
</style>
<body>
<div class="contianer">
    <div class="item">jhgfds</div>
</div>
</body>

等高

<style>
    .contianer {
        border: 1px solid black;
        overflow: hidden;
        margin-bottom: 30px;
    }
    .box {
        float:left;
        width:33.3333333%;
        background-color: gray;
       /* padding-bottom:1200px;
        margin-bottom: -1200px;*/
    }
</style>
<body>
    <div class="contianer">
        <div class="box">
            fefe <br/>
            fefe <br/>
            fefe <br/>
            fefe <br/>
            fefe <br/>
        </div>
        <div class="box">
            gge <br/>
            gge <br/>
            gge <br/>
        </div>
        <div class="box">gfd</div>
    </div>
</body>