父级元素使用flex布局父级元素使用justify-content: center;实现水平居中父级元素使用align-items: center;实现垂直居中
示例代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.a {display: flex;/* 水平居中 */justify-content: center;/* 垂直居中 */align-items: center;background-color: royalblue;height: 100px;}.a .one {background-color: aqua;height: 20px;}.a .two {background-color: red;height: 20px;}</style></head><body><div class="a"><div class="one">111111111111111111</div><div class="two">222222222222222222</div></div></body></html>
效果：
