Centering in CSS

by Dudusky

• send email
• meet with my baby
• date with dudusky
• wirte techical reporting about javaScript

   graph LR;
    A[Hard edge]-->|Link text|B(Round edge);
    B-->C{Decision};
    C-->|One|D[Result one];
    C-->|Two|E[Result two];

Horizontally

1. Is it inline or linle-elemnets?

• You can center inline elements horizontally, within a block-level parent element,with just:
  ```css
  .cener-children {
  text-align: center;
  }

* This will work for inline, inline-block,inline-table,inline-flex.
- - -
#### 2. Is it a block level element?
*  You can center a block-level element by giving it margin-left and margin-rifht of auto (ant it has a set width,otherwise it would be full width and wouldn't need centering).That's often done with shorthand like this:
  ```css
  .center-me  {
            margin: 0 auto;
  }

• This will work no matter what the width of the block level elemnt you"re centering, or the parent.
  

  ---

3. Is there more than one block level element?

• If you have two or more block-level elements that need to be centered horizontally in a row, chances are you"d better served making them a differen display type.Here"s an example of making them inline-block and an example of flexbox:

  ~~~css

  .inline-block-center {
  text-align: center;
  }
  .inline-block-center div {
  display: inline-block;
  }

  .flex-center {
  display: flex;
  justify-content: center;
  }
  ~~~

• Multiple block level elements stacked on top of each other, in which case auto margin technique is still fine:

  main div {
          maring: 0 auto;  
  }

  ---

Vertically

1. Is it inline or linline*elements?

• Is it a single line?

• Sometimes inline/text elements can appear vertically centered, just because there is equal padding about and below them,like this:

  ~~~css
  .link {
  padding-top: 30px;
  padding-bottom: 30px;

          }
  ~~~
  

  • Is it multiple lines?

2. Is it blcok-level element?

Both Horizontally and Vertically

Conclusion