How to center an element, inside a container, vertically and horizontally?

Question

I know this is a very trivial and beginner-like question, and I know this is a common question answered many times in a lot of different ways. What I'm asking for is guidance, a lot of the solutions are given without the context and many are not beginner-friendly. I'm trying to understand everything I can about the methods and how to use them in other situations.

This situation: What I wanted to accomplish was a centered block, relative to the page, I've done it. Now I would like to set an input box centered within the block as well, but it happens to not being centered, even inside a flex. (I've heard somewhere that if an element inside a display: flex, it also becomes flex), why isn't it the case here?

If I'm not asking too much, please give an explanation on why do "x" and "y" to achieve the result.

Here's what I've got so far

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>

Loi Nguyen Huynh · Accepted Answer · 2019-12-26T01:11:50.400

1

You have to add

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

to #box as well, because you want to center input inside the container #box, so you have to put those 3 lines inside the container #box whose the element you want to center, just like what you did with centering #box inside #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>

edited Dec 26 '19 at 01:11

answered Dec 26 '19 at 00:47

Loi Nguyen Huynh

8,492
2
29
52

But if I do that then the "red block" isn't centered relative to the page. I mean I would like to center "#box" relative to the page as well. – Ryenra Dec 26 '19 at 00:59
@Ryenra then don't **move** it, **copy** it. – Loi Nguyen Huynh Dec 26 '19 at 01:00
It worked! Can you give me more insight on flexbox, because what I've read about it is that when you use display: flex on a div, the elements inside it will have the property as well, but in this example we're setting both parent and child to display flex, why? – Ryenra Dec 26 '19 at 01:05
2

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ This guide helped me out a lot. It give you a visual of what the different flexbox properties do. – cpppatrick Dec 26 '19 at 01:08
1

When you add `display: flex` for an element, that element becomes a **flex-container**, its children elements only become **flex item** *(flex children)*. You want `#box` becomes a *flex-container* as well, not only *flex children*. – Loi Nguyen Huynh Dec 26 '19 at 01:09
maybe it's time to consider voting to close question as duplicate .. you already answered many centring quesiton and we already have a billion question about centring – Temani Afif Dec 26 '19 at 01:17
@TemaniAfif Yet that's the theory, the theory was the same, and **he could center the `#box`**, but **couldn't know why the `input` wasn't centered**. He's stuck with his specific case, and what's wrong with him when he's just a beginner and stuck with a theory he's learning? – Loi Nguyen Huynh Dec 26 '19 at 01:24
1

*If Stackoverflow doesn't help people who are stuck with their code, then what it does?* --> I guess you are not understanding what SO is for. It's not for helping people, we aren't a chat room, a forum or a hlepdesk. We are a high quality Q&A website where we need to build canonical Q&A and not all the question deserve or should be answered because people are having issue. We don't care about people here, we care about content. We aren't here for the *quick* help that you are talking about. – Temani Afif Dec 26 '19 at 01:50
Yet *high quality* you mean non-beginner-friendly. What this site is for is not determined by anyone, it's determined by the community. The ultimate purpose of this website is eventually helping people learn to code faster. Some might use it right, some might not. If the quality you talked about means a good comprehensive answer can be found via searching google, then let google take care of it. The OP of this question also said that he did his own research and couldn't figure out, maybe he should take a Bootcamp to learn. Anyway, I got your point, won't argue more. – Loi Nguyen Huynh Dec 26 '19 at 02:02

How to center an element, inside a container, vertically and horizontally?

1 Answers1