# CSS Magic

**Repository Path**: Nadax/CSS-Magic

## Basic Information

- **Project Name**: CSS Magic
- **Description**: CSS 小样例
- **Primary Language**: CSS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://nadax.gitee.io/css-magic
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2017-12-26
- **Last Updated**: 2020-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CSS Magic

[按钮1](http://nadax.gitee.io/css-magic/button/button1.html)
[按钮2](http://nadax.gitee.io/css-magic/button/button2.html)
[loading](http://nadax.gitee.io/css-magic/loading/loading.html)
[百度输入框](http://nadax.gitee.io/css-magic/baiduInput/)
[图片上传](http://nadax.gitee.io/css-magic/imageUpload)

## 布局

### 垂直水平居中

#### 行内元素

垂直居中: 使 line-hight 等于 hight
水平居中: text-align: center

#### 块级元素

```html
<div class="wrapper">
  <div class="box"></div>
</div>
```

```css
.wrapper {
  position: relative;
}

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
```

```css
.wrapper {
  position: relative;
}

.box {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
```

```
.wrapper {
  height: 200px;
  line-height: 200px;
  text-align: center;
}

.box {
  display: inline;
  font-size: 0;
  padding: 50px;
}
```

```
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
```