css使图片居中的方法有哪些(2)-木庄网络博客

弹性盒用在导航栏是最普遍的。与之相比，栅格布局是普适的布局系统。

#pic {
    display: grid;   
    align-items: center;     /*块级方向（纵向）上的全部栅格元素居中对齐*/
    justify-items: center;  /*行内方向（横向）所有的元素中线对齐*/
}

所以能够非常方便的处理多张图片对齐的问题。

五、绝对定位中对齐

css

#pic {
    position: relative;   /*设置绝对定位元素（img）的容纳块，如果不设置，那么容纳块默认为body*/
}
.logo {
    position: absolute;   
    right: 1em; left: 1em;     //表示左右距离相等
    margin: 0 auto;         //与方法二相似
}

与方法二最大的区别是，margin的用法是针对block元素的。如果用position就不需要设置block 了。但是position一般用在框架布局上，如果只是图片居中有点大材小用，比较麻烦。不建议。

六、背景图片居中

html

1	`<div></div>`

css

div {
    height: 1000px;  /*高度非常重要*/
    background: url(star.jpg) no-repeat top center; 
}

前提：只要元素内容是空的，就必须设置高度。因为div内容是空的，所以必须要设置高度，否则div是没有空间的，那背景图片自然也不会显示。如果是body就不用，因为body自带高度。

设置为背景图片的局限性是无法设置超链接、title、alt等图片的属性。如果不是背景图片，尽量不要用这种格式。

（学习视频分享：css视频教程）

以上就是css使图片居中的方法有哪些的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » css使图片居中的方法有哪些

css使图片居中的方法有哪些

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论