css不定宽高水平垂直居中

使用Flexbox弹性盒子布局来对不定宽高的内容进行水平垂直居中，设置代码很简单，只需要对需要水平垂直居中的内容的父元素添加三个样式即可。父元素样式代码：justify-content: center; align-items: center; display: flex;

方法/步骤

新建一个html文件，在这个html文件上创建一个

，然后对这个

添加一个样式类，最后在这个

里再创建一个子元素并在这个元素中添加要垂直居中的内容。代码：

不宽高的水平垂直居中
不宽高的水平垂直居中

设置父元素样式。使用Flexbox弹性盒子让子元素自动水平垂直居中；使用justify-content设置子元素水平居中，使用align-items设置子元素垂直居中。css代码：

保存html文件后使用浏览器打开即可看到效果。如图

可以直接复制所有代码到新建的html文件上，粘贴保存后运行即可看到效果。所有代码：

不宽高的水平垂直居中
不宽高的水平垂直居中

推荐信息

欧尼酱