css完全居中

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

列出两种方法备忘一下。
主要参考如何只用CSS做到完全居中，英文原文在Absolute Centering in CSS。
这是一篇很好的文章。

首先画一个矩形框来进行演示，为了截图效果，我们给body一个背景颜色。
HTML相关内容如下：

1
2
3
4
<body>
	<div class="container">
	</div>
</body>

CSS相关内容如下：

1
2
3
4
5
6
7
8
9
body {
	background-color: #999;
}

.container {
	background-color: #fff;
	width: 300px;
	height: 200px;
}

效果如图：
初始效果

水平居中

在css文件的.container中加上说明margin: auto。

1
2
3
4
5
6
.container {
	background-color: #999;
	width: 300px;
	height: 200px;
	margin: auto;
}

效果如图：
水平居中

完全居中

  • 方法一
    设置position为absolute，具体如下。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .container {
    	background-color: #fff;
    	width: 300px;
    	height: 200px;
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%,-50%);
    }

  • 方法二
    将position设置为absolute，将top,bottom,left,right都设置为0。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .container {
    	background-color: #fff;
    	width: 300px;
    	height: 200px;
    	margin: auto;
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    }

效果如图：
完全居中

注意：
在容器内完全居中将父元素的position设置为 relative。（经实测，父元素position: absolute也可以）

向左偏移

令left:0; right:auto。

1
2
3
4
5
6
7
8
9
10
11
.container {
	background-color: #fff;
	width: 300px;
	height: 200px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: auto;
}

效果如图：
向左偏移