一:元素水平居中
1. 定宽时,margin方式,必须满足的条件
- 被居中的元素宽固定
- 元素是块级元素或者设置为display:inline-block|block
- 元素的左右margin设为auto
2. 定宽时,定位方式,必须满足的条件
- 元素宽固定
- 元素绝对定位,left为50%
- 元素的margin-left为元素宽的一半(负值)
- 适用于垂直居中,将margin-top设为高的一半
- 水平垂直居中时,将这两个组合起来即可
3. 不定宽时,定位方式,必须满足的条件
- 用css3的transform:translate,让它自己向上向左移动自身宽高的一半
- IE9+
4. 文字水平居中
- 单行文字用text-align:center
- 多行文字参照块居中
5. flex布局
- justify-content实现主轴居中
- aign-items实现交叉轴居中
- 结合使用实现水平垂直居中
举个栗子
如果块级元素中的行内元素inline | 行内块元素inline-block | inline-table | inline-flex 居中或者文字居中,用text-align:center
<div class="center"><span>inline hello world</span></div>
.center{
width: 500px;
height: 200px;
border: 1px solid #000;
text-align: center;
}
定宽的块级元素,用margin:0 auto
<div class="center">
<div class="block">block hello</div>
</div>
.center{
width: 500px;
height: 200px;
border: 1px solid #000;
}
.block{
width: 200px;
border: 1px solid #00f;
// 整个块相对于父元素center居中
margin: 0 auto;
}
不定宽的块状元素水平居中
// 给该不定宽的元素设置为inline-block,父元素用text-align:center;也适用于定宽的情况
.center{
width: 500px;
height: 200px;
border: 1px solid #000;
text-align: center;
}
.block{
border: 1px solid #00f;
display: inline-block;
}
定宽元素定位方式水平居中
.center{
width: 500px;
height: 200px;
border: 1px solid #000;
position: relative;
}
.block{
width: 200px;
border: 1px solid #00f;
position: absolute;
left: 50%;
margin-left: -100px;
}
二:元素垂直居中
1. 定位方式,与水平方式类似
- transform:translate(0,-50%)即可
2. 单行文本垂直
- 将文本的line-height设置父元素的高度
3. 在不考虑浏览器兼容性问题时,用flex布局是最好的
- 容器flex布局
- 项目的margin为auto
举个栗子
单行文本垂直居中
<div class="center"><span>inline hello world</span></div>
.center{
width: 500px;
height: 200px;
border: 1px solid #000;
}
span{
line-height: 200px;
}
定高时,定位方式,垂直居中
.center{
width: 500px;
height: 200px;
border: 1px solid #000;
position: relative;
}
.block{
width: 200px;
height: 100px;
border: 1px solid #00f;
position: absolute;
top:50%;
margin-top: -50px;
}
三:水平垂直居中
水平垂直居中实际上是水平居中和垂直居中的结合,单独拆分开可以实现某个方位的居中
举个栗子
flex布局,水平垂直布局
// justify-content和align-items结合使用,实现水平垂直布局
.center{
width: 500px;
height: 200px;
border: 1px solid #000;
display: flex;
// 1. 主轴方向,水平居中
justify-content: center;
// 2. 交叉轴方向,垂直居中
align-items:center;
// 3. 两者结合,水平垂直居中
}
flex布局,水平垂直居中
.center{
width: 500px;
height: 200px;
border: 1px solid #000;
display: flex;
}
.block{
width: 200px;
height: 100px;
border: 1px solid #00f;
// 1. 每个项目的margin设置为auto,实现水平垂直居中
margin: auto;
// 2. 水平居中
margin : 0 auto;
// 3. 垂直居中
margin : auto 0;
}
定宽高时,绝对定位实现水平垂直居中,常用于弹出框
.center{
width: 500px;
height: 200px;
border: 1px solid #000;
position: relative;
}
.block{
width: 200px;
height: 100px;
border: 1px solid #00f;
position: absolute;
top: 0;
left:0;
bottom: 0;
right: 0;
margin: auto;
}
不定宽高时,水平垂直居中,定位方式,transform
.center{
width: 500px;
height: 200px;
border: 1px solid #000;
position: relative;
}
.block{
border: 1px solid #00f;
position: absolute;
// 1. 单独设置left,translate(-50%,0)即可实现水平居中
// 2. 单独设置top,translate(0,-50%)即可实现垂直居中
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-0-transform:translate(-50%,-50%);
transform: translate(-50%,-50%);
}
四:总结
1. 最好不使用定位方式,因为它对整体的布局影响很大。
2. 不考虑兼容性时,用flex布局
3. 元素被放置在半像素位置时,用transform-style:preserve-3d解决