1.水平居中常见实现方式
- 对于行内元素(inline):父元素
text-align:conter
- 对于块级元素(block):有宽度把
margin-left和margin-right设成auto
不能设置宽度的变成行内块处理即可
2.垂直居中常见的实现方式
- 对文字:其核心是设置行高(line-height)等于包裹他的盒子的高度
- 对元素:父级元素设置:display:table-cell;vertical-align:middle子元素设置为line-block
3.水平垂直居中的常见实现方式
- 不定宽高
.outer {
position: relative;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} //兼容性差
- 定宽高
.outer {
position: relative;
}
.inner { 。inner{ }
position: absolute; position:absolute
left: 50%; top:0;
top: 50%; left:0;
margin-left: -50px; right:0;
margin-top: -50px;
bottom:0;
} margin:auto;}//有宽高但是不需要计算宽高
3.flex布局
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */(多行时:align-content:center副轴居中)//兼容性差