Dreamweaver 2018怎么把多个元素DIV自动水平和垂直居中显示？
工具/原料
Dreamweaver 2018
方法/步骤
1
启动DW软件，并新建一个页面。
2
在body中输入一个div并引入一个CSS名为a【
】，输入以下样式【.a{width: 400px;height: auto;padding: 10px 10px;background: #C3C3C3;}】。刷新后查看效果3
在第一个DIV中添加一个文字A标签【这是一段文字】，并引入CSS【.b{width: 100px;line-height: 20px;display: block;}】。刷新后查看效果
4
在a标签上方再添加一个DIV【
】，并引入CSS【.c{width: 50px;height: 50px;background: #FF0004;margin-right: 10px;}】。刷新查看效果。5
复制a标签上方刚添加的div并粘贴到a标签下方一个div，刷新后可以看到两个红色的div【
】。6
在最外层DIV引入的CSS 【a】中添加下面两个代码【justify-content: center;display: flex;】。刷新下可以看到，所有元素都水平居中对齐了，但是没有垂直居中。
7
继续在刚才的位置添加一个CSS样式【align-items: center;】。刷新后可以看到所有元素也都垂直居中啦。
注意事项
最主要的就是使用justify-content: center; display: flex; align-items: center;这三个CSS样式
上一篇：长条气球编织教程