How to center the elements within a div?

Question

I’m trying to align the elements that are three circles with their respective descriptions within my div center using the following class:

.center {
    margin:auto;    
}

However, I did not succeed in this way, it is all left. Those are the elements that I would like to align:

.ligado {
    background: yellow;
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.desligado {
    background: gray;
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.center {
    margin:auto;    
}

<div class="center">
  <div id="1" class="ligado"></div>  
  <p>Quarto</p>
  
  <div id="2" class="desligado"></div>
  <p>Cozinha</p>
  
  <div id="3" class="ligado"></div>
  <p>Sala de estar</p>
</div>

How could I center the elements within the div?

Answer 1

.ligado {
    background: yellow;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto; //adicionado
}

.desligado {
    background: gray;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto; //adicionado
}

.center {
    // modificado
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

<div class="center">
  <div id="1" class="ligado"></div>  
  <p>Quarto</p>
  
  <div id="2" class="desligado"></div>
  <p>Cozinha</p>
  
  <div id="3" class="ligado"></div>
  <p>Sala de estar</p>
</div>

Answer 2

I was going to dismiss that answer because I was wondering if the <div> also had to stay or not centered on the page. But I ended up leaving in the same way as in the question, I hope it’s what you need.

Only thing I changed on the dial .center was a beige background to highlight itself <div>, used a display: table and lined up the text at the center text-align: center;.

To selectors .ligado and .desligado added margin: auto; to centralize the elements.

.ligado {
  background: yellow;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: auto;
}

.desligado {
  background: gray;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: auto;
}

.center {
  background: beige;
  display: table;
  text-align: center;
}

<div class="center">
  <div id="1" class="ligado"></div>
  <p>Quarto</p>

  <div id="2" class="desligado"></div>
  <p>Cozinha</p>

  <div id="3" class="ligado"></div>
  <p>Sala de estar</p>
</div>

Answer 3

Let’s see...

I’m going to expose a alternative to the @Uilherme-Henriques response using the concept of flexbox CSS 3. This alternative also aligns more with your centering mode.

Before CSS 3, it was the "default" mode. Today it is not mainstream or cool. Fashion stuff..

---

Centering a <div>

A <div>, to be centralized, must have a defined size from horizontal (width). Their banks must be configured to be automatic. Example:

#fundo { 

  width: 100%;
  height: 100px;
  
  background-color: #c33; 
  
  }
  
#exemplo {

  width: 200px;
  height: 50px;
  margin: auto;
  
  background-color: #fff;
  text-align: center;

  }

<div id="fundo">
  <br />
  <div id="exemplo">&lt;div&gt; centralizado horizontalmente</div>
</div>

Note that this does not centralize the internal elements of <div>. However, this will still be reference for the internal elements to it - including other elements <div>. Thus:

• The internal elements of a <div> parent are not centralized when centralizing the <div> father. They need to be centralized independently following the rules already exposed: defined size and automatic margin.
• For text and images, you should use text alignment (text-align: center).

The size of a <div> father must be larger than the internal elements so that the phenomenon of horizontal centralization can be observed. If they are of equal size (e. g width: 100%; in parent and child elements), centralization occurs however without visual observation. They will be superimposed.

See the following example. Note that I differentiated the heights so that the centralization and overlap can be observed.

#fundo { 

  height: 100px;
  
  background-color: #c33; 
  
  }
  
#exemplo {

  height: 50px;
  margin: auto;
  
  background-color: #fff;
  text-align: center;

  }

<div id="fundo">
  <br />
  <div id="exemplo">&lt;div&gt; centralizado horizontalmente</div>
</div>

In most real-life cases, a programmer with no experience (or even a strong theoretical basis) could assume that nothing happened. Identical backgrounds as to color and identical heights corroborate for wrong premise. It is a common mistake.

Therefore, consider using margin: auto; in all elements <div> that you want to center inside the parent element. Can be individually:

.desligado {
    ...
    margin: auto;
}

.ligado {
    ...
    margin: auto;
}

... Or general:

.center > div { // ">" indica elementos-filho (descendente direto)
    margin: auto;
}

Functional example

Follows your code functionally. Note that .center was used only for flowering and visual observance of the phenomenon.

.ligado {
  background: yellow;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.desligado {
  background: gray;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.center {
  text-align: center;     /* centraliza o texto */
  background-color: #eee; /* fornece cor ao fundo para melhor visualizar */
  padding: 2em;           /* 'desgrudado' das bordas do div-pai */
}

.center > div { /* centraliza os elementos 'div' dentro do 'div.center' */
  margin: auto;
}

<div class="center">

  <div id="1" class="ligado"></div>  
  <p>Quarto</p>

  <div id="2" class="desligado"></div>
  <p>Cozinha</p>

  <div id="3" class="ligado"></div>
  <p>Sala de estar</p>
  
</div>

Answer 4

Both the element div as to the element p are block elements, thus placing margin: auto in the father div .center will not align them to the center. You need to use a selector that will align everything to the center:

.center > *{
    margin: auto;
    text-align: center;
}

The above code will apply margin: auto to all block elements with fixed width, centering them, and also their internal texts.

.ligado {
    background: yellow;
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.desligado {
    background: gray;
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.center > * {
    margin: auto;
    text-align: center;
}

<div class="center">
  <div id="1" class="ligado"></div>  
  <p>Quarto</p>
  
  <div id="2" class="desligado"></div>
  <p>Cozinha</p>
  
  <div id="3" class="ligado"></div>
  <p>Sala de estar</p>
</div>