居中，等高，负边距

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

Strugglin

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

阅读量207

点赞数

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

本文链接：https://blog.csdn.net/strugglin/article/details/80502254

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一些常用的基本样式总结

当由内容撑开的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>

Strugglin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
居中，等高，负边距

当由内容撑开的div水平垂直居中&lt;style&gt; * { padding:0px; margin:0px; } .contianer { width: 600px; height: 300px; border: 1px solid red; position:relat...
复制链接

扫一扫

专栏目录