# center_style

**Repository Path**: xin-yue-qin/center_style

## Basic Information

- **Project Name**: center_style
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-06
- **Last Updated**: 2021-10-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![css水平居中脑图](https://gitee.com/xin-yue-qin/blogimg/raw/master/juzhong_img/CSS%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E8%84%91%E5%9B%BE.png)

# 水平居中

## 1.行内元素

> **行内元素特征：**
>
> （1）宽高就是内容的高度，不可以改变
>
> （2）对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
>
> （3）和其他元素都在一行，不会自动进行换行
>
> （4）行内元素只能行内元素，不能包含块级元素
>
> （5）可通过 `display:inline` 转换成行内元素

> **常见的行内元素：**
>
> button、img、 input、label、span、textarea、select（下拉列表）....

​	若是行内元素，给其父元素设置`text-align:center`即可实现行内元素水平居中

```
<div class="parent">
    <span class="child">居中</span>
 </div>

<style>
    .parent {
      background-color: rgb(73, 40, 165);
      text-align: center; /* 水平居中 */
    }
    .child {
      color: #fff;
      background-color: rgb(16, 190, 16);
    }
</style>
```

![](https://gitee.com/xin-yue-qin/blogimg/raw/master/juzhong_img/%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0text-align.png)

## 2.块状元素



> **块状元素特征：**
>
> （1）能够识别宽高，宽度没有设置时默认为100%
>
> （2）margin和padding的上下左右均对其有效
>
> （3）可以自动换行
>
> （4）多个块状元素标签写在一起，默认排列方式为从上至下
>
> （5）可通过 `**display:block**` 转换成块状元素
>
> （6）块级元素中可以包含块级元素和行内元素

> **常见的块状元素：**
>
> div、p、ul、ol、li、aside、h、form、table 等语义化标签....

### 2.1 宽高固定

当宽高固定时，以下HTML示例：

```
<div class="parent">
    <div class="child"></div>
</div>

<style>
    .parent {
      height: 100px;
      background-color: aqua;
    }
    .child {
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }
</style>
```

添加上以下四种CSS方式都能达到水平居中的效果：

![](https://gitee.com/xin-yue-qin/blogimg/raw/master/juzhong_img/%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0-%E5%AE%BD%E9%AB%98%E5%9B%BA%E5%AE%9A.png)

#### 方式一：margin: 0 auto

```
<style>
  .child {
    margin:0 auto;
  }
</style>
```

#### 方式二： absolute + margin-left

```
<style>
  .child {
    position: absolute;
    margin-left: -50px;
    left: 50%;
  }
</style>
```

#### 方式三： absolute + calc

> **calc() 函数用于动态计算长度值。**
>
> - 需要注意的是，运算符前后都需要保留一个空格，例如：`width: calc(100% - 10px)`；
> - 任何长度值都可以使用 calc() 函数进行计算；
> - calc()函数支持 "+", "-", "*", "/" 运算；
> - calc()函数使用标准的数学运算优先级规则；

```
<style>
  .child {
    position: absolute;
    left: calc(50% - 50px);
  }
</style>
```

#### 方式四：absolute + left + right + margin

```
<style>
  .child {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
</style>
```

### 2.2 宽高不定

当宽高不定时，以下测试示例：

```

<div class="parent">
  <div class="child">测试示例</div>
</div>
<style>
  .parent {
    height: 100px;
    background-color: aqua;
  }
  .child {
    background-color: blueviolet;
    color: #fff;
  }
</style>
```

以下三种方式显示效果均为：

![](https://gitee.com/xin-yue-qin/blogimg/raw/master/juzhong_img/%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0-%E5%AE%BD%E9%AB%98%E4%B8%8D%E5%AE%9A.png)

#### 方式一：使用CSS3中新增的 transform 属性

> transform 属性允许我们对元素进行旋转、缩放、移动或倾斜。
>
> translate(x,y)定义2D变换
>
> translate3d(x,y,z)定义3D变换

```
<style>
.child{
	position:absolute;
	left:50%;
	transform:translate(-50%,0);
}
```

#### 方式二：flex布局

`justify-content`属性定义了项目在主轴（水平）上的对齐方式。

> `justify-content`可取值：
>
> - `flex-start`（默认值）：左对齐
> - `flex-end`：右对齐
> - `center`： 居中
> - `space-between`：两端对齐，项目之间的间隔都相等。
> - `space-around`：每个项目两侧的间隔相等（类似`margin-left = margin-right`）。所以，项目之间的间隔比项目与边框的间隔大一倍。

```
<style>
.child{
	display:flex;
	justify-content:center;
}
</style>
```

![](https://gitee.com/xin-yue-qin/blogimg/raw/master/juzhong_img/%E6%B0%B4%E5%B9%B3%E5%B1%85%E4%B8%AD-flex%E5%B8%83%E5%B1%80.png)

#### 方式三：width: fit-content

```
<style>
.child{
	width:fit-content;
	margin:0 auto;
}
```

`fit-content` 是 CSS3 中给`width`属性新加的一个属性值，它配合`margin`可以轻松实现水平居中。

# 垂直居中

## 1.行内元素

HTML示例：

```
<div class="parent">
  <span class="child">测试示例</span>
</div>
<style>
  .parent {
    height: 100px;
    background-color: aqua;
    text-align: center; /* 水平居中 */
  }
  .child {
    color: #fff;
    background-color: blueviolet;
  }
</style>
```

添加以下五种方式的css代码即可实现垂直居中的效果

**单行文本**

#### 设置 line-height

```
<style>
.child{
	line-height:100px;
}
```

![](https://gitee.com/xin-yue-qin/blogimg/raw/master/juzhong_img/%E5%8D%95%E8%A1%8C%E6%96%87%E6%9C%AC-%E8%AE%BE%E7%BD%AEline-height.png)

当多行时样式会错乱，需要用到 `vertical-align:middle`布局

**多行文本**

#### 方式一：display : table-cell + vertical-align

`vertical-align` 属性设置元素的垂直对齐方式。

> vertical-align属性可被用于两种环境：
>
> - 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本内的图片：
>
>   ![](https://gitee.com/xin-yue-qin/blogimg/raw/master/juzhong_img/vertical-align%E9%80%82%E7%94%A8%E7%8E%AF%E5%A2%831.png)
>
> - 垂直对齐表格单元内容:
>
>   ![](https://gitee.com/xin-yue-qin/blogimg/raw/master/juzhong_img/vertical-align%E9%80%82%E7%94%A8%E7%8E%AF%E5%A2%832.png)

然而，`vertical-align` 只对行内元素、表格单元格元素生效，不能用它垂直对齐块级元素，所以，`vertical-align`属性只有在父层为`td`或者`th`时，才会生效，对于其他块级元素，如`div`、`p`等，默认情况是不支持的。

为了使用`vertical-height`，我们需要设置父元素`display:table`，子元素`display:table-cell;vertical-align:middle;`

```
<style>
.parent{
	display:table;
}

.child{
	display:table-cell;
	vertical-align:middle;
}
</style>
```

![](https://gitee.com/xin-yue-qin/blogimg/raw/master/juzhong_img/%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD-%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0-%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC1.png)

#### 方式二：display : inline-block+vertical-align 隐式幽灵节点

设置幽灵节点的高度以及幽灵节点的基线（通过`line-height`），来设置幽灵节点的`x-height`，是`span`的中线与幽灵节点的中线对齐，同样也可以使`vertical-align:middle;`居中

```
<!DOCTYPE html>
<html lang="en">

<body>
   
<div class="parent">
  <span class="child">测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例测试示例</span>
</div>
<style>
  .parent {
    height: 100px;
    background-color: aqua;
    text-align: center; /*水平居中*/

    line-height: 100px; /* 通过 line-height 设置幽灵节点的基线 */
  }
  .child {
    color: #fff;
    background-color: blueviolet;
    vertical-align: middle;
    
    line-height: normal;  /* 重点，要把 line-height 设置成 normal, 要不然会继承100 */
    display: inline-block;  /* 块级元素时需要加，使其拥有行内元素的特性 */
     
  }
</style>
</body>
</html>
```

![](https://gitee.com/xin-yue-qin/blogimg/raw/master/juzhong_img/%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD-%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0-%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC2.png)

#### 方式三：writing-mode 布局

`writing-mode` 属性定义了文本在水平或垂直方向上如何排布。

> - horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
> - vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
> - vertical-lr：垂直方向内内容从上到下，水平方向从左到右
> - sideways-rl：内容垂直方向从上到下排列
> - sideways-lr：内容垂直方向从下到上排列

```
<style>
.parent{
	writing-mode:vertical-lr;
}

.child{
	writing-mode:horizontal-tb;
}
</style>
```

![](https://gitee.com/xin-yue-qin/blogimg/raw/master/juzhong_img/%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD-%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0-%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC3.png)

#### 方式四：display:grid 布局

```
<style>
.parent{
	display:grid;
}
.child{
	margin:auto;
}

```

![](https://gitee.com/xin-yue-qin/blogimg/raw/master/juzhong_img/%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD-%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0-%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC4.png)

## 2.块级元素

### 2.1 宽高固定

HTML示例：

```
<div class="parent">
  <div class="child"></div>
</div>
<style>
  body {
    background-color: aqua;
  }
  .child {
    width: 50px;
    height: 50px;
    background-color: blueviolet;
  }
</style>
```

添加以下几种CSS方式均可实现垂直居中的效果。

![](https://gitee.com/xin-yue-qin/blogimg/raw/master/juzhong_img/%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0-%E5%AE%BD%E9%AB%98%E5%9B%BA%E5%AE%9A.png)

#### 方式一：absolute+margin-top

```
<style>
.child{
	position:absolute;
	margin-left:-25px;
	left:50%;
	margin-top:-25%;
	top:50%；
}
</style>
```

#### 方式二：absolute + calc

```
<style>
.child{
	position:absolute;
	left:calc(50% - 25px);
	top:calc(50% - 25px)
}
</style>
```

#### 方式三：absolute+left+right+top+bottom

```
<style>
.child{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto
}
</style>
```

### 2.2 宽高不定

当宽高不定时，HTML示例：

```
<div class="parent">
  <div class="child">测试示例</div>
</div>
<style>
  .parent {
    height: 100px;
    background-color: aqua;
  }
  .child {
    background-color: blueviolet;
  }
</style>
```

以下几种css方式都能实现以下垂直居中的效果：

![](https://gitee.com/xin-yue-qin/blogimg/raw/master/juzhong_img/%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0-%E5%AE%BD%E9%AB%98%E4%B8%8D%E5%AE%9A.png)

#### 方式一：使用CSS3中新增的transform属性

需要设置parent为相对定位（`position:relative`）

```
<style>
.parent{
	position:relative;
}
.child{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
```

#### 方式二：flex布局

```
<style>
.parent{
	display:flex;
	height:100%;
	justify-content:center;  /*水平居中*/
	align-items:center		/*垂直居中*/
}
</style>
```