(前端手撕)1.未知宽高元素垂直水平都居中

未知宽高元素垂直水平都居中

1. flex法

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .wrap {
            width: 200px;
            height: 200px;
            border: solid 1px red;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .inner {
            width: 80px;
            height: 80px;
            border: solid 1px blue;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>
</html>

————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
2. 定位+transform

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .wrap {
            width: 200px;
            height: 200px;
            border: solid 1px red;
            position: relative;
        }
        .inner {
            width: 80px;
            height: 80px;
            border: solid 1px blue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>
</html>

————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
3. 表格

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .wrap {
            width: 200px;
            height: 200px;
            border: solid 1px red;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .inner {
            width: 80px;
            height: 60px;
            border: solid 1px blue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>
</html>

————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
4. 定位+auto

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .wrap{
            width: 200px;
            height: 200px;
            border: solid 1px red;
            position: relative;
        }
        .inner {
            width: 80px;
            height: 80px;
            border: solid 1px blue;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>
</html>

————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
5. 网格

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .wrap {
            width: 200px;
            height: 200px;
            border: solid 1px red;
            display: grid;
            justify-content: center;
            align-items: center;
        }
        .inner {
            width: 80px;
            height: 80px;
            border: solid 1px blue;

        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner"></div>
    </div>
</body>
</html>
全部评论

相关推荐

这是什么操作什么意思,这公司我服了...
斯派克spark:意思是有比你更便宜的牛马了
点赞 评论 收藏
分享
程序员小白条:找的太晚,别人都是大三实习,然后大四秋招春招的,你大四下了才去实习,晚1年
点赞 评论 收藏
分享
来个大佬救一下,为上投了都是石沉大海了,没实习经历的话怕秋招直接进不了面。什么实习这么难找,基本
心态爆炸了:现在正式的岗位都少,实习基本不咋招的,除了大厂,中小企业其实没那么多岗位需求,就算是有,大多都是招一两个廉价劳动力,同时,他们也会希望你一来就能干活的,没时间培训你,就让你了解公司的项目,你了解完就可以开始干活。再者是,很多低质量的实习其实用处没有那么大的。我去年也是找实习找到破防,最后去了一家深圳的小公司实习,工作对我来说很简单,甚至不如我在学校做的项目,秋招的时候,这段实习经历也并没有帮上什么忙,投递简历,依旧非常低的回复率。低回复率是常态,尤其是找实习,找不到,那就把重心放在优化自己的简历和项目,多看八股文,锻炼自己的面试能力,多看别人的面经,自己模拟面试,等秋招的时候,只要有那么寥寥几次,好好抓住那几次机会。
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务