1、新建一个html文件，在这个html文件上创建一个<div>，然后对这个<div>添加一个样式类，最后在这个<div>里再创建一个子元素并在这个元素中添加要垂直居中的内容。代码：<div class="paernt"> <div> 不宽高的水平垂直居中<br/> 不宽高的水平垂直居中<br/> </div> </div>
2、设置父元素样式。使用Flexbox弹性盒子让子元素自动水平垂直居中；使用justify-content设置子元素水平居中，使用align-items设置子元素垂直居中。css代码：<style type="text/css"> .parent{ height: 300px; background-color: #96b97d; justify-content: center; align-items: center; display: flex; } </style>
3、保存html文件后使用浏览器打开即可看到效果。如图
4、可以直接复制所有代码到新建的html文件上，粘贴保存后运行即可看到效果。所有代码：<!DOCTYPE html><稆糨孝汶;html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .parent{ height: 300px; background-color: #96b97d; justify-content: center; align-items: center; display: flex; } </style> </head> <body> <div class="parent"> <div> 不宽高的水平垂直居中<br/> 不宽高的水平垂直居中<br/> </div> </div> </body></html>
