Question

我知道这是一个非常琐碎且类似于初学者的问题，并且我知道这是一个以许多不同方式回答了很多次的常见问题。我要提供的是指导，很多解决方案都是在没有上下文的情况下给出的，而且许多解决方案都不适合初学者。我正在尝试了解关于该方法的所有知识，以及在其他情况下如何使用它们。

这种情况：我想要完成的是相对于页面的居中位置，我已经做到了。现在，我想将输入框也设置在块的中心，但是即使在flex内部，输入框也不会居中。 （我听说某处display: flex中的元素也会变成flex），为什么这里不是这种情况 ？

如果我要求不高，请解释为什么“ x”和“ y”获得结果。

这就是我到目前为止所拥有的

http://jsfiddle.net/szhycjop/

html,body{
    height: 100%    
}

#content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}


#box{
    width: 350px;
    height: 300px;
    border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="content">
        <div id="box">
            <input id = "inputFile" type="file" name="inFile" multiple>
        </div>        
    </div>
</body>
</html>

Answer 1

您必须添加

display: flex;
justify-content: center;
align-items: center;

也要

到#box，因为您想将 input放在容器#box 的中心，因此必须将这3行放在容器#box ，其元素要居中， 就像在#box 中居中#content一样>。

html,body{
    height: 100%    
}

#content {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


#box{
    width: 350px;
    height: 300px;
    border: 1px solid black;
    background: red;
    
    /* add here */
    display: flex;
    justify-content: center;
    align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="content">
        <div id="box">
            <input id = "inputFile" type="file" name="inFile" multiple>
        </div>        
    </div>
</body>
</html>

如何在容器内垂直和水平地将元素居中？

1 个答案: