css豎直居中實現

前言

元素居中是常見的css布局，個人較懶，總是用到了搜一下，但覺得自己做的不對，需要系統的總結一下，於是參照網上大神們的文章，寫了一篇總結。

1. 利用絕對定位和相對定位 （元素居中）

html

```

我是測試內容
```

```

.box 
.child 
// 除使用translate外，還可以用margin: auto
.child 
```

2. 設定佔位元素 （元素居中）

html

```

使用了佔位元素
```

```

.box 
.base 
.child 
```

3. 使用flex布局 （元素居中）

html

```

我是測試內容
```

```

.box 
.child 
```

4. 通過padding&margin實現偽居中 （元素居中， 內容居中）

父元件不指定高度（但要指定寬度，不然寬度會為100%），而指定其padding，實現子元素的居中

html

```

我是測試內容
```

```

#box 
#child 
```

1. flex布局

2. vertical-align: middle;

該樣式是控制居中

但也可以控制文字居中

html

```

vertical-align實現文字豎直居中
```

```

.container 
```

溫故知新

css彈性盒子

css 元素水平 豎直居中

一 水平居中 1.文字水平居中 給父級元素設定text align center 2.確定寬度的塊級元素居中 設定自身margin left auto margin right auto 別忘了設定自身寬度 3.不確定寬度的塊級元素的居中 1 用table幫助實現不確定寬度塊級元素居中 塊級元素 設...

css 元素水平 豎直居中

一 水平居中 1.文字水平居中 給父級元素設定text align center 2.確定寬度的塊級元素居中 設定自身margin left auto margin right auto 別忘了設定自身寬度 3.不確定寬度的塊級元素的居中 1 用table幫助實現不確定寬度塊級元素居中 塊級元素 設...

css元素的水平，豎直居中

一 水平居中 1.文字水平居中 給父級元素設定text align center 2.確定寬度的塊級元素居中 margin 0 auto margin left,margin right 0 3.不確定寬度的塊級元素的居中 1 用table幫助實現不確定寬度塊級元素居中 塊級元素 設定table元素...