水平和垂直居中(笔记)

2017-07-23

一、水平居中

1、inline 元素用text-align: center;即可，如下：

1
2
3

.container {
   text-align: center;
}

2、block 元素可使用margin: auto;

.container {
    text-align: center;
}
.item {
    width: 1000px;
    margin: auto;
}

3、绝对定位元素可结合left和margin实现，但是必须知道宽度。

.container {
    position: relative;
    width: 500px;
}
.item {
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin: -150px;
}

二、垂直居中

1、inline 元素可设置line-height的值等于height值，如单行文字垂直居中：

.container {
   height: 50px;
   line-height: 50px;
}

2、绝对定位元素，可结合left和margin实现，但是必须知道尺寸。

优点：兼容性好

缺点：需要提前知道尺寸

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}

3、绝对定位可结合transform实现居中。

优点：不需要提前知道尺寸

缺点：兼容性不好

.container {
    position: relative;
    height: 200px;
}
.item {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}

4、绝对定位结合margin: auto，不需要提前知道尺寸，兼容性好。

.container {
    position: relative;
    height: 300px;
}
.item {
    width: 100px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}