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

PHP中文网 JavaScript 百度已收录

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

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

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

推荐：《css视频教程》

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

方法1：利用flex进行布局

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

1

2

3

4

5

6

7

8

9

10

11

12

13

<div class="wrapper flex-center">

    <p>horizontal and vertical</p>

</div>

.wrapper {

    width: 300px;

    height: 300px;

    border: 1px solid #ccc;

}

.flex-center {

    display: flex;

    justify-content: center;

    align-items: center;

}

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

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

方法2：使用position+transform

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

阅读剩余部分

相关阅读 >>

css该如何隐藏文本框

css如何修改字体大小

css 修改后 不更新怎么办

css是用来做什么的?

css文件的扩展名是什么？

css怎么设置字体白色描边

css注释方式是什么

css怎么设置黑体字

django修改了css文件不生效怎么办

你可能不了解的16 个提升布局效率的 css 伪类！！

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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