Center a single div on body with Dsplay: Flex

Asked

Viewed 66 times

0

I have the body and a div with width: 320px;

I would like to focus on body that is flex.

But look at that, NAY I want to center your content.

Would like to centralize the very div in body. 

    body {
       display: flex;
    }
       
    div#tudo {
       display: flex;
       width: 320px;
    }
<body>

    <div id=tudo>

          <label>teste</label>

    </div>

</body>

Use margin: 0 auto or has some recourse flexbox for that reason?

What I seek is a property that makes similar to the result of align-self: center. However, in the horizontal.

css css3

  • Have you tried using the margin that quotes? What was the result? And if you do not want to use flex, it did not make much sense to ask as it does in flex. By the way, this should have several duplicates on the site. Even researched?

  • Center horizontally or vertically?

  • Hello Antonio. Good morning! So with margim it works But I want to start using the flex. I was not very happy in my placement. What I’m really looking for is something similar to align-self but for horizontal. I don’t think there’s any?

  • There is a BIG difference in an element that is a flex container, and the element that is the child of a flex container. I strongly suggest that you read this guide in Portuguese about flex https://origamid.com/projects/flexbox-fullguide/ is half an hour that you will stop to study and will better understand what I said and because your question is duplicated. After reading the guide read the duplicate link, it will help you ;)

  • 1

    Well, I added information to the question. If you can read it... I appreciate it! But I will read your references!

  • 2

    Related or new duplicate: https://answall.com/questions/355954/no-flexbox-por-que-o-justify-self-n%C3%a3o-works in-children of a parent-with-display

Show 1 more comment

1 answer

-3

#envolve {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 320px;
}

<body>
<div id="envolve">
<div id=tudo>

      <label>teste</label>

</div>
</div>
</body>

try this to see if it solves

  • Why would that solve the problem?

  • Buddy. It’s not centered. But, as Antonio said, it seems that what I am looking for does not exist in the flex or what I am wanting to do is not a good practice. Thank you for your time. I’m reading the reference he spent!

  • OK friend, it is always good to give a studied before using the properties...

  • but in reality the code you want is the same one I posted, only it didn’t work because I forgot to set the height and the width of the div "wraps" with the maximum width of the screen

  • I think it’s not "the code he wants," he wants an explanation of why and how it works... Try to give an enriched answer, I think it will help more talk like fishing than delivering the fish

  • But if he wants to understand how it works he is in the wrong place, to understand how it works the guy will see a Tutorial on youtube or a Tutorial from some site, or some PDF explaining, I ein

  • kkkk, boys don’t fight. I thank you all equally, What happened was that I studied, then went to practice. As it did not work the way expected after a lot of breaking my head I decided to ask for help here on the forum. Thanks and thanks to all!

  • 2

    @Maybe I misunderstood the purpose of the site. The goal of Stack Overflow is to be a repository of knowledge that uses the format questions and answers, in which, ideally, the question presents a problem and the answer presents a description of the solution as a server purpose as a research source for the community. Giving a code ready and telling the user to "stand alone" to understand is the exact opposite of what the site proposes. If you want, in [meta] there are already several discussions about this.

Show 3 more comments

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.