设置居中的几种方式

发表于 更新于 分类于 本文字数： 269 阅读时长 ≈ 1 分钟
页面布局过程中，经常需要居中对齐（水平、垂直），下面写几种常用的居中对齐的方式

设置居中的几种方式

普通水平居中

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;
}