图片 css div居中代码怎么写


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<style type="text/css">

    *{margin: 0;padding:0;}

    div{

        width:150px;

        height: 100px;

        position: relative;

        border:1px solid #000;

    }

    img {

        width: 50px;

        height: 50px;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%,-50%);

    }

</style>

方法四:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<style type="text/css">

    *{margin: 0;padding:0;}

    div{

        width:150px;

        height: 100px;

        position: relative;

        border:1px solid #000;

    }

    img {

        width: 50px;

        height: 50px;

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        margin: auto;

    }

</style>

方法五:弹性布局flex

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<style type="text/css">

    *{margin: 0;padding:0;}

    div{

        width:150px;

        height: 100px;

        border:1px solid #000;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    img {

        width: 50px;

        height: 50px;

    }

</style>

效果都一样,希望能帮到大家!

以上就是图片 css div居中代码怎么写的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

css如何添加阴影边框(代码实例)

css怎么让文字不换行

css如何设置浮动

图片之间的间隔css怎么设置

css全局样式有什么意义

css怎么样清除浮动

css padding-right属性怎么用

css中resize什么意思

浅谈css元素显示模式

css布局方法有哪些

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    暂无评论...