css宽高不固定如何实现居中

本文摘自PHP中文网，作者藏色散人，侵删。

css宽高不固定实现居中的方法：1、利用flex进行布局实现居中；2、使用css3中transform进行元素偏移；3、利用table-cell实现居中即可。

本教程操作环境：windows7系统、css3版，该方法适用于所有品牌电脑。

推荐：《css视频教程》

css宽高不固定如何实现居中？

方法1：利用flex进行布局

大家的第一反应，可能就是 flex 了。因为它的写法够简单直观，兼容性也没什么问题。是手机端居中方式的首选。

利用到了 2 个关键属性：justify-content 和 align-items，都设置为 center，即可实现居中。

需要注意的是，一定要把这里的 flex-center 挂在父级元素，才能使得其中 唯一的 子元素居中。

方法2：使用position+transform

主要使用了css3中transform进行元素偏移，效果非常好

阅读剩余部分

相关阅读 >>

css如何设置背景图片不平铺

css border-left-style属性怎么用

html中表格tr的td单元格怎么设置宽度属性

dw如何新建css规则

css 布局之两端布局实现

css怎么设置图片的对比度

css最大的优点是什么

css column-count属性怎么用

css外部样式表有两种引用方法，分别是什么

css font-stretch属性怎么用

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

书籍

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

￥83.86元   人民邮电出版社

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

转载请注明出处：木庄网络博客 » css宽高不固定如何实现居中