内容导读

1. 最好不使用定位方式，因为它对整体的布局影响很大。

一：元素水平居中

1. 定宽时，margin方式，必须满足的条件

被居中的元素宽固定
元素是块级元素或者设置为display:inline-block|block
元素的左右margin设为auto

2. 定宽时，定位方式，必须满足的条件

元素宽固定
元素绝对定位，left为50%
元素的margin-left为元素宽的一半（负值）
适用于垂直居中，将margin-top设为高的一半
水平垂直居中时，将这两个组合起来即可

3. 不定宽时，定位方式，必须满足的条件

用css3的transform:translate，让它自己向上向左移动自身宽高的一半
IE9+

4. 文字水平居中

单行文字用text-align：center
多行文字参照块居中

5. flex布局

justify-content实现主轴居中
aign-items实现交叉轴居中
结合使用实现水平垂直居中

举个栗子
如果块级元素中的行内元素inline | 行内块元素inline-block | inline-table | inline-flex 居中或者文字居中，用text-align:center

<div class="center"><span>inline hello world</span></div>
.center{
 width: 500px;
 height: 200px;
 border: 1px solid #000;
 text-align: center;
}

定宽的块级元素，用margin:0 auto

<div class="center">
 <div class="block">block hello</div>
</div>
.center{
 width: 500px;
 height: 200px;
 border: 1px solid #000;
}
.block{
 width: 200px;
 border: 1px solid #00f;
 // 整个块相对于父元素center居中
 margin: 0 auto;
}

不定宽的块状元素水平居中

// 给该不定宽的元素设置为inline-block，父元素用text-align：center；也适用于定宽的情况
.center{
 width: 500px;
 height: 200px;
 border: 1px solid #000;
 text-align: center;
}
.block{
 border: 1px solid #00f;
 display: inline-block;
}

定宽元素定位方式水平居中

.center{
 width: 500px;
 height: 200px;
 border: 1px solid #000;
 position: relative;
}
.block{
 width: 200px;
 border: 1px solid #00f;
 position: absolute;
 left: 50%;
 margin-left: -100px;
}

二：元素垂直居中

1. 定位方式，与水平方式类似

transform:translate(0,-50%)即可

2. 单行文本垂直

将文本的line-height设置父元素的高度

3. 在不考虑浏览器兼容性问题时，用flex布局是最好的

容器flex布局
项目的margin为auto

举个栗子
单行文本垂直居中

<div class="center"><span>inline hello world</span></div>
.center{
 width: 500px;
 height: 200px;
 border: 1px solid #000;
}
span{
 line-height: 200px;
}

定高时，定位方式，垂直居中

.center{
 width: 500px;
 height: 200px;
 border: 1px solid #000;
 position: relative;
}
.block{
 width: 200px;
 height: 100px;
 border: 1px solid #00f;
 position: absolute;
 top:50%;
 margin-top: -50px;
}

三：水平垂直居中

水平垂直居中实际上是水平居中和垂直居中的结合，单独拆分开可以实现某个方位的居中
举个栗子
flex布局，水平垂直布局

// justify-content和align-items结合使用，实现水平垂直布局
.center{
 width: 500px;
 height: 200px;
 border: 1px solid #000;
 display: flex;
 // 1. 主轴方向，水平居中
 justify-content: center;
 // 2. 交叉轴方向，垂直居中
 align-items:center;
 // 3. 两者结合，水平垂直居中
}

flex布局，水平垂直居中

.center{
 width: 500px;
 height: 200px;
 border: 1px solid #000;
 display: flex;
}
.block{
 width: 200px;
 height: 100px;
 border: 1px solid #00f;
 // 1. 每个项目的margin设置为auto，实现水平垂直居中
 margin: auto;
 // 2. 水平居中
 margin : 0 auto;
 // 3. 垂直居中
 margin : auto 0;
}

定宽高时，绝对定位实现水平垂直居中，常用于弹出框

.center{
 width: 500px;
 height: 200px;
 border: 1px solid #000;
 position: relative;
}
.block{
 width: 200px;
 height: 100px;
 border: 1px solid #00f;
 position: absolute;
 top: 0;
 left:0;
 bottom: 0;
 right: 0;
 margin: auto;
}

不定宽高时，水平垂直居中，定位方式，transform

.center{
 width: 500px;
 height: 200px;
 border: 1px solid #000;
 position: relative;
}
.block{
 border: 1px solid #00f;
 position: absolute;
 // 1. 单独设置left，translate(-50%,0)即可实现水平居中
 // 2. 单独设置top，translate(0,-50%)即可实现垂直居中
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%,-50%);
 -ms-transform:translate(-50%,-50%);
 -0-transform:translate(-50%,-50%);
 transform: translate(-50%,-50%);
}

四：总结

1. 最好不使用定位方式，因为它对整体的布局影响很大。
2. 不考虑兼容性时，用flex布局
3. 元素被放置在半像素位置时，用transform-style:preserve-3d解决

四时宝库

程序员的知识宝库

技术专栏-CSS居中（css各种居中）

内容导读

一：元素水平居中

二：元素垂直居中

三：水平垂直居中

四：总结