css实现水平&垂直居中

最新推荐文章于 2023-08-02 23:06:40 发布

吴琼__Candice

最新推荐文章于 2023-08-02 23:06:40 发布

阅读量245

点赞数 1

分类专栏： web 前端文章标签： css css3

本文链接：https://blog.csdn.net/sinat_34798463/article/details/114141586

版权

web 前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

项目中经常需要实现水平、垂直居中，一直想着整理一下居中的几种方法，拖拖拉拉到今天才有时间整理，下面话不多说就直接用多种方法实现div水平垂直居中吧！.container设置容器几何属性，.container_center设置容器的居中属性。

本文的背景是body是响应式的，没有固定宽高；同时子元素也不确定宽高和数量。

<html>
	<body>
		<div class="container container_center">center</div>
	</body>
</html>

通过margin：auto实现水平&垂直居中

水平居中一定要给定width，否则width默认100%，无法实现居中

.container_center {
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.container {
  width: 100px;
}

实现垂直居中，不仅需要给定height，还需要绝对定位

.container_center {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.container {
  width: 100px;
  height: 100px;
}

**通过flex布局来实现水平&垂直居中。**详细的解释见flex、阮一峰老师的Flex布局教程

flex水平居中，如果容器的主轴为水平方向, 默认：水平方向；

.container_center {
  display: flex;
  justify-content: center;
}

如果主轴为垂直方向；

.container_center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Flex垂直居中，如果容器的交叉轴为垂直方向，默认：垂直方向

.container_center {
  display: flex;
  align-items:center
}
.container {
  height: 100%;
}

如果交叉轴为水平方向

.container_center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.container {
  height: 100%;
}

通过table-cell实现水平&垂直居中。
1. table-cell实现垂直居中，容器需要给定需要vertical-align：middle，如果还需要水平居中，还需配合text-align：center；
```
.container_center {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.container {
  width: 180px;
  height: 300px;
}
```
  注：使用table-cell实现居中，容器需要给定宽高，百分比不起作用
通过transform: translate实现水平&垂直居中
1. transform: translate实现水平居中
```
.container_center {
  position:absolute;
  left:50%;
  transform:translate(-50%);
}
```
2. transform: translate实现垂直居中
```
.container_center {
  position:absolute;
  top:50%;
  transform:translate(0,-50%);
}
```
3. transform: translate实现水平&垂直居中
```
.container_center {
  position:absolute;
  top:50%;
  left: 50%;
  transform:translate(-50%,-50%);
}
```
  注： translate是在不知道自身宽高的基础上，实现居中。因为translate()函数中的百分比是相对于自身宽高的百分比，所以可以居中。

已知容器宽高、自身宽高的居中比较简单，这里我就不一一举例。后面项目中再遇到其他的居中方法，我再补充吧！

吴琼__Candice

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css实现水平&垂直居中

项目中经常需要实现水平、垂直居中，一直想着整理一下居中的几种方法，拖拖拉拉到今天才有时间整理，下面话不多说就直接用多种方法实现div水平垂直居中吧！.container设置容器几何属性，.container_center设置容器的居中属性。本文的背景是body是响应式的，没有固定宽高；同时子元素也不确定宽高和数量。<html> <body> <div class="container container_center">center</div&g
复制链接

扫一扫