flex布局实现可视窗口内的水平垂直居中

[[{"txt": "\u672c\u6587\u5229\u7528flex\u5e03\u5c40\u5b9e\u73b0\u4e86\u53ef\u89c6\u7a97\u53e3\uff0c\u5373\u6d4f\u89c8\u5668\u7a97\u53e3\u5185div\u6846\u7684\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\uff0c\u5e76\u4e14\u968f\u7740\u53ef\u89c6\u7a97\u53e3\u653e\u5927\u548c\u7f29\u5c0f\uff0c\u4f9d\u65e7\u4fdd\u6301\u5782\u76f4\u5c45\u4e2d\u7684\u5e03\u5c40\u3002"}], [{"txt": ["\u5de5\u5177/\u539f\u6599"]}, {"txt": "\u4efb\u610f\u524d\u7aef\u5f00\u53d1\u5de5\u5177"}], [{"txt": ["\u65b9\u6cd5/\u6b65\u9aa4"]}, {"txt": "\u65b0\u5efahtml\u6587\u4ef6\uff0c\u547d\u540d\u4e3aflex.html"}, {"img": ["https://exp-picture.cdn.bcebos.com/e996472ae3efe078033c4503b96c576698cf65a6.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}, {"txt": "\u9996\u5148\u5c06html\u6807\u7b7e\u8bbe\u7f6e\u4e3aflex\u5bb9\u5668\uff0c\u5e76\u8bbe\u7f6e\u8be5\u5bb9\u5668\u4e2d\u7684\u5b50\u5143\u7d20\u4e3b\u8f74\u5c45\u4e2d\u5bf9\u9f50\uff0c\u4ea4\u53c9\u8f74\u5c45\u4e2d\u5bf9\u9f50\u3002\u7531\u4e8e\u76ee\u6807\u662f\u53ef\u89c6\u7a97\u53e3\u5185\u7684\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\uff0c\u5c06html\u6807\u7b7e\u7684\u9ad8\u5ea6\u8bbe\u4e3a100vh\uff0cvh\u610f\u5473viewport height\uff0c\u4e5f\u5c31\u662f\u53ef\u89c6\u7a97\u53e3\u9ad8\u5ea6\u3002"}, {"img": ["https://exp-picture.cdn.bcebos.com/586bfdefe0781431c7bba8d9dc6699cf035362a6.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}, {"txt": "\u6b64\u65f6\uff0c\u6dfb\u52a0\u9700\u8981\u5782\u76f4\u5c45\u4e2d\u7684\u5b50\u5143\u7d20\uff0c\u5728\u6b64\u6dfb\u52a0\u4e00\u4e2adiv\u5e76\u6dfb\u52a0\u6587\u5b57\u3002\u968f\u540e\uff0c\u4e3adiv\u6807\u7b7e\u8bbe\u7f6e\u8fb9\u6846\uff0c\u4ee5\u4fbf\u66f4\u597d\u5730\u89c2\u5bdf\u6548\u679c\u3002"}, {"img": ["https://exp-picture.cdn.bcebos.com/e2aefe781431dfb62b61cdd312cf02532e6363a6.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}, {"txt": "\u70b9\u51fb\u8fd0\u884c\uff0c\u67e5\u770b\u6548\u679c\u3002\u53ef\u4ee5\u770b\u5230\u6dfb\u52a0\u7684\u6587\u5b57\u8fb9\u6846\u662f\u57fa\u4e8e\u53ef\u89c6\u7a97\u53e3\u5782\u76f4\u5c45\u4e2d\u7684\u3002"}, {"img": ["https://exp-picture.cdn.bcebos.com/e1390a31dfb6326c4d6b037a89532f63228560a6.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}, {"txt": "\u7f29\u5c0f\u6d4f\u89c8\u5668\u53ef\u4ee5\u770b\u5230\uff0c\u968f\u7740\u53ef\u89c6\u7a97\u53e3\u7684\u7f29\u5c0f\uff0c\u8be5\u6846\u4f9d\u65e7\u662f\u5782\u76f4\u5c45\u4e2d\u7684\u3002"}, {"img": ["https://exp-picture.cdn.bcebos.com/ef4c24ceaad7726b4fefff52bf0f64781523b9a6.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}]]