设置居中的几种方式

设置居中的几种方式

普通水平居中

1
2
3
4
div{
width:200px;
margin:0 auto;
}

使用尾类垂直居中

1
2
3
4
5
<div class="wrap">
<div class="content">

</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.wrap {
height: 500px;
background: red;
}

.content {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
vertical-align: middle;
}

.wrap:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}

使用translate居中

这种方式父元素一定要有宽度和高度,top继承自父元素。

如果只想设置水平居中或者垂直居中,可以单独设置translateX/translateY

1
2
3
4
5
6
7
8
9
10
div{
width: 100px;
height: 100px;
background: red; //方便查看效果

position: relateive;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

浮动元素居中

确定容器的宽高 宽500 高 300 的层

设置层的外边距

1
2
3
4
5
6
7
8
.div {
width:500px ; height:300px;//高度可以不设
margin: -150px 0 0 -250px;
position:relative; //相对定位
background-color:pink; //方便看效果
left:50%;
top:50%;
}

绝对定位div居中

1
2
3
4
5
6
7
8
9
10
11
12
div{
position: absolute;
width: 100px;
height: 100px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;

background: red;
}

字体图标在div中居中

1
2
3
<div>
<i class="fa fa-plus fa-5x" aria-hidden="true"></i>
</div>
1
2
3
4
5
6
7
8
9
10
div{
width:200px;
height:200px;
line-height:200px;
text-align:center;
}

i{
vertical-align: middle;
}
Disqus 加载中...

如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理