居中

css

盒模型

盒模型的组成，由里向外content,padding,border,margin.

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

在标准的盒子模型中，width指content部分的宽度

box-sizing的使用

box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
box-sizing的默认属性是content-box

居中

水平居中

行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
垂直居中

设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;
//不知道宽高

width: 78px;
height: 78px;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
//知道宽高

height: 100px;
width: 100px;
position: absolute;
left:50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
display:flex;
justify-content: center;
align-content: center;