一,div的水平居中(安全区)
给div一个宽度,然后左右外边距为 auto
width:1000px;
margin:0 auto;
二,文本的居中
垂直居中:
height:30px;
line-height:30px;
水平居中:text-align:center;
文字在图片的中间,把此元素放置在父元素的中部:
vertical-align:middle;
此方法也可以去掉图片向下撑大的3px,因为图片的vertical-align的默认值为baseline。
注意,目前只有图片支持vertical-align这个属性,别的都不支持。
三,不固定宽高的水平垂直居中
- 方法一
<img src="img.jpg" /><span></span>
.nav img{
vertical-align:middle;
}
.nav span{
display:inline-block;
vertical-align:middle;
height:100%;
width:0;
}
- 方法二
div{
display:table-cell;
text-align:center;
vertical-align:middle;
}
3.方法三
div{
position: relative;
}
img{
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
4.方法四
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
5.方法五
div{
display:flex;
justify-content:center;
align-items:center;
}
四,固定宽高的水平垂直居中
- 方法一
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
- 方法二
img{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
- 方法三
p{
width: 200px;
height: 100px;
background: #ff0;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
- 方法四
div{
display:flex;
justify-content:center;
align-items:center;
}