如何将input元素居中于.input_box容器？CSS布局求助

你的核心问题是把Flex布局的属性用错了对象——display: flex、align-items、justify-content是用来定义容器的布局规则的，不是给内部的input元素加的。调整代码即可解决：

修改后的CSS代码 #

.input_box {
    box-sizing: border-box;
    width: 519px;
    height: 26px;
    /* 给容器添加Flex布局，实现内部元素水平+垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 可选：给容器加背景色，方便观察容器范围 */
    background-color: #eee;
}

.input_box>input {
    width: 100%;
    height: 100%;
    padding: 1px 0 1px 0;
    border: none;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    background-color: #11274c;
    font-size: 100%;
    /* 移除不必要的属性：input无需设置display:flex，margin:auto也不再需要 */
}

关键说明 #

• 将Flex布局属性移到.input_box容器后，容器会自动把内部的input在水平和垂直方向上居中对齐
• 你之前接触的margin: auto方法，原理是让块级元素在固定宽高的容器中自动分配剩余空间实现居中，但Flex布局的方式更直观，适配性也更强
• 保留input的width:100%和height:100%，可以让它填满容器，同时通过容器的Flex属性保证它的位置始终居中

内容的提问来源于stack exchange，提问作者cason chen