css实现水平居中和垂直居中

css实现居中

1.水平居中

div {

  width：100px//设置宽度固定

  margin: auto //居中

}

2.利用绝对定位实现水平垂直居中：

position: absolute；

left:  0；

right: 0；

bottom: 0；

top: 0;

margin: auto

3.知道长度和宽度,水平垂直居中

position: relative;

width: 500px;

height: 300px;

top: 50%;

left: 50%;

margin: -150px 0 0 -250px;

4.不 知道长度和宽度,水平垂直居中

position: relative;

top: 50%;

left: 50%;

transform: translate(-50%, -50%)

5. css3的flex布局

设在内容父元素上：

display: flex;

justify-content: center;

align-items: center;