<简述浏览器缓存之cookie 浏览器打开页面的过程中发生了什么>

CSS常用的水平垂直居中方法

#### 前言
这是个老掉牙的问题了，[西法](http://www.boatsky.com "太空船博客" rel="nofollow")又刚好看到以前写的demo里有这个，干脆贴出来水一下。
demo汇总：<http://res.boatsky.com/demo/css/center.html>
为统一样式，写了两个公共class,分别是容器与内容，后面的demo不再重复贴这段代码:
```css
.wrap {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid #bbb;
    margin-top: 5px;
    background-color: #ccc;
}
.content {
    width: 140px;
    height: 80px;
    background-color: yellow;
}
```
#### 单行文字居中
最简单的居中，现在属性可实现，无兼容性问题，只有特殊场景可用
 ```html
<section class="wrap wrap1">
    demo1
</section>
```
 ```css
.wrap1 {
    line-height: 200px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
```
后面两行是对超长内容溢出进行……省略处理
#### 负margin居中
这可能是最年长的居中方式了，无兼容性问题，要求已知内容的大小
```html
<section class="wrap">
    <div class="content content2">demo2</div>
</section>
```
```css
.content2 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -70px;
}
```
#### translate处理
比较常用的css3居中方式
```html
<section class="wrap">
    <div class="content content3">demo3</div>
</section>
```
```css
.content3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
```
#### 添加伪元素居中
无兼容问题，需要添加伪元素
```html
<section class="wrap wrap4">
    <div class="content content4">demo4</div>
</section>
```
```css
.wrap4 {
    text-align: center;
}
.wrap4:before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 100%;
    vertical-align: middle;
}
.content4 {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}
```
#### auto居中
无兼容问题，可能没有上述居中方式使用这么多
```html
<section class="wrap wrap5">
    <div class="content content5">demo5</div>
</section>
```
```css
.content5 {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
```
#### flex居中
新型方式，如果不考虑兼容，这是最好的方式，因为不再需要对容器与内容增加限制
```html
<section class="wrap wrap6">
    <div class="content content6">demo6</div>
</section>
```
```css
.wrap6 {
    display: flex;
    justify-content: center;
    align-items: center;
}
```
#### table居中
不仅有兼容性问题，还需要额外加一层容器，用的比较少
```html
<section class="wrap wrap7">
    <div class="table-cell">
        <div class="content content7">demo7</div>
    </div>
</section>
```
```css
.table-cell {
    display: table-cell;
    vertical-align: middle;
}
.content7 {
    margin: 0 auto;
}
```

如果觉得有帮忙，您可以在本页底部留言。

CSS常用的水平垂直居中方法

全部留言

我要留言