如何实现水平居中
- inline行内元素-如span
<div style="text-align:center">
<span>我要居中<span/>
<div/>
给行内元素追加一个父元素 设置text-align:center
2. 普通流block(有宽度width)
设置margin:0 auto
3. 浮动
已知宽度
css.{
width:200px;
height:200px;
float:left://脱离文档流,margin:0 auto失效
position:relative;
left:50%;
margin-left:-100px;
}
未知宽度
css.{
//width:200px;
height:200px;
float:left://脱离文档流,margin:0 auto失效
position:relative;
left:50%;
transform:translateX(-50%)
}
- 绝对定位
未知宽度
css.{
//width:200px;
height:200px;
position:absolute;
left:0;
right:0;
margin:0 auto;
}
已知宽度
css.{
width:200px;
height:200px;
position:absolute;
left:50%;
right:0;
transform:translateX(-50%)//或者margin-left:-100px;
}
- flex布局
给父级元素使用flexbox布局
css.{
display:flex;
justify-content:center
}
如何实现垂直居中
1.单行的行内元素
子元素和父元素设置相同高度
father.{
height:100px;
}
son.{
line-height:100px
margin:0;//p标签自带margin,要清除
}
2.多行的行内元素
给父元素设置
display: table-cell;
vertical-align:middle;
3.块级元素
已知宽度
father.{
position:relative
}
son.{
width:200px;
height:200px;
position:absolute;
top:50%;
transform:translateY(-50%)//或者margin-left:-100px;
}
4.flexbox
father.{
display:flex;
justify-content:center;
align-item:center;
}
son.{
width:200px;
height:200px;
}
5.伪元素