垂直水平居中div

// 第一种：grid布局
<div id="bg_img">
    <div>
      <input type="text" />
    </div>
 </div>

// css
#bg_img{
  display: grid;
  place-items: center;
　height:100vh; // 必须设置高度
}

// 第二种：flex布局
<div class="box">
        <span class="span1">span1</span>
        <span class="span2">span2</span>
        <span class="span3">span3</span>
        <span class="span4">span4</span>
        <span class="span5">span5</span>
</div>


        .box {
            display: flex;
            height: 100vh; // 必设高度
            background-color: pink;
            flex-wrap: wrap;
            justify-content: center; // space-between:左右两个贴边，其余等分
            align-items: center;
        }

        .box span {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin: 5px;
        }