1、块状元素水平居中：
margin-left=auto；margin-right=auto；
2、浮动块状元素水平居中：
外包装块“float：left；position：relative；left：50%”；
内部块“float：left；position：relative；right：50%”
3、内容居中：
内联元素：text-align:center；vertical-align:middle
块状元素：
display:table-cell;
vertical-align:middle;
若是单行内容：line-height=height
4、绝对定位元素垂直水平居中：
方法1：
.element {
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -200px;
/* 高度的一半 */
margin-left: -300px;
/* 宽度的一半 */
}
但这种方法优点是兼容性较好，缺点是需要提前知道元素的尺寸，否则margin负值的调整无法精确。此时，往往要借助JS获得。
方法2：使用CSS3
CSS3的兴起，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，无需提前知道元素尺寸，其都是水平垂直居中显示的。但此方法兼容性不好。
.element {
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 第一个50%为width的一半，第二个50%为height的一半 */
}
方法3：上下左右均0位置定位+“margin: auto”（推荐做法！）
.element {
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
/* 水平和垂直都居中 */
}
若只设置“margin-left:auto”+“margin-right:auto”,则仅水平居中；
若只设置“margin-top:auto”+“margin-bottom:auto”,则仅垂直居中；
【CSS|块状元素居中/浮动元素居中/绝对定位元素居中/内容居中】
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaWeb|JavaWeb学习——CSS
- flex|C语言-使用goto语句从循环中跳出
- java|你跳一次涨多少（今天见识到跳槽天花板！！）