1

How to have a circle in center of page using flex box and that has to be responsive ? I tried below but it did not work out.

HTML

<div class="circle">Hello I am A Circle </div>

CSS

   .circle {
        width:50px;
        height:50px;
        border-radius:100%;
        font-size:50px;
        color:#fff;
        line-height:500px;
        text-align:center;
        background:#000;
        flex:1;
        justify-content:center;
        align-items:center;
   }
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
vuejsdev
  • 25
  • 6
  • 1
    Can you show the parent element? `justify-content` and `align-items` should be on the parent which needs `display: flex` to actually use flexbox. – ggorlen Aug 04 '20 at 13:59
  • 1
    Does this answer your question? [Flexbox: center horizontally and vertically](https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically) – ggorlen Aug 04 '20 at 14:00
  • https://codepen.io/devvue/pen/vYGBqoe see this please, this is not working..it is still stays on top – vuejsdev Aug 04 '20 at 14:15

1 Answers1

1

Give your container a specific height and you'll see that your code is working as intended. The problem is that your container is only as big as the circle, so you won't notice until you make the container bigger. Try making it something 500px tall.

Dan Mullin
  • 4,285
  • 2
  • 18
  • 34
  • here is what I did so far codepen.io/devvue/pen/vYGBqoe – vuejsdev Aug 04 '20 at 14:24
  • 1
    Modify your container class to see that it's working:.container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; height: 500px; background: #000; } – Dan Mullin Aug 04 '20 at 14:25
  • If the answer solves the problem for you, consider [accepting it](https://stackoverflow.com/help/someone-answers). – ggorlen Aug 04 '20 at 15:02