Center div using flex

Css flex center horizontally and vertically

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

How center content in css by using flex

	display: flex;
    width: 60%;
    justify-content: center;
    margin: 0 auto;

Center div css flex

section {
  width: 200px;
  border: 1px solid #2d2d2d;
  display: flex;
  justify-content: center;
}

How to center a element in flex

.iconContainer{
    display:inline-flex;
    align-items:center;
    justify-content: center;
    height:50px;
    width: 50px;
    border:solid green 3px;    
}
.iconLeft{
    display: inline-block;
}

Center div using flex

<div class="container">
  <div class="item"></div>
</div>

div.container {
  background: gray;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.item {
  background: silver;
  width: 30px;
  height: 30px;
}

Similar codes

0 vote245 views1 answer
Backface-visibility: hidden;
CSS
0 vote147 views1 answer
Como diminuir uma imagem em css
CSS
2 votes126 views2 answers
How to give 2 different background color css
CSS
-2 votes254 views3 answers
Box sizing reset
CSS
0 vote137 views2 answers
Mat-select-panel-wrap change position
CSS
0 vote138 views1 answer
Move text outside div
CSS
0 vote138 views1 answer
Ghjhgggggggg
CSS
26 votes135 views5 answers
Css multiple classes
CSS
1 vote134 views1 answer
Textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; }
CSS
0 vote169 views1 answer
Css tips and tricks to handle the complicated stuffs in design part which is helpfull to handle at tha critical time and to deliver requirement to the client to the main resource
CSS