center a div

1.container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}

1.center {
2    position: fixed;
3    top: 50%;
4    left: 50%;
5    transform: translate(-50%, -50%);
6}

1.MyDiv{
2  	display: block;
3  	margin-left: auto;
4	margin-right: auto;
5}

1/* this will center all children within the parent element. */
2.parent {
3  display: flex;
4  justify-content: center; /* horizontal */
5  align-items: center; /* vertical */
6}

1.container{
2	margin: 0 auto;
3    display: flex;
4    align-items: center;
5}

1<div id="outer">
2  <div id="inner">Foo foo</div>
3</div>
4//css:, demo with border
5<style>
6#inner {
7  display: table;
8  margin: 0 auto;
9  border: 1px solid black;
10}
11
12#outer {
13  border: 1px solid red;
14  width:100%
15}
16</style>