<html><head> <style type="text/css"> .box{ height:400px; width:600px; background-color: #f2dede; display: flex; flex-direction: row; align-items: center; justify-content: center; } </style></head><body><div class="box"> <div style="background-color: #00a4e6">居中</div> <div style="background-color: #00b33c">居中</div></div></body></html>
解释：
align-items:center，掌握垂直方向
justify-content:center，掌握水平方向
弹性布局先容：
Flex 弹性盒子布局是很强大的布局，它可以很方便的掌握元素在垂直和水平方向上的行为。
利用display:flex
主轴和交叉轴容器存在两个轴，水平叫主轴（Main-Axis），垂直叫交叉轴（Cross-Axis）。主轴左边是开始位置（main start）右边是结束位置（main end），交叉轴上是开始位置（cross start）下是结束位置（cross end）。用 justify 属性掌握主轴项目的空隙，利用 align 属性掌握交叉轴项目之间的垂直行为。
容器一共有 6 个属性：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
#记录我的2024#
