题目

1.第一类，div中的文字或者图片在div中垂直水平居中

2.第二类，div元素相对于它的父元素垂直水平居中

解法

第一类:文字/图片

line-height

仅限子元素为行内元素或图片，且只有单行/单个

第二类:div子元素

1.margin

父元素设置border或者padding，子元素设置magin。灵感来源于《CSS权威指南》第三版

• p180 auto小节

• p182 合并外边距详解小节

在包含块上设置边框或内边距时，会使其子元素的外边距包含在包含块内

也就是说父元素在设置边框或者内边距后，子元素的margin属性在垂直方向上可以直接以父元素边框为参考对象

缺点: 需要知道子元素宽高，并且父元素需额外添加没有太大意义的border/padding

事实上也可应用于图片，见示例

父元素

border: 1px solid transparent;/* 或者设置padding */

子元素

background-color: orange;
margin: calc(50% - 2.5em) auto;

relative+transform

父元素不用更改

子元素

position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

缺点：行内元素失效

通用解法

优点: 无需知道子元素的宽高

flex

父元素中添加

display: flex;
justify-content: center;
align-items: center;
/* flex-wrap: wrap; 换行 */
flex-direction: column;/* 调主轴 */

relative+absolute(+transform)

父元素使用position: relative，子元素设置如下

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

当然，如果标签自带margin或padding值，记得清除，否则translate移动的值将不是你想要的，除非你使用了box-sizing: border-box 。详情参见盒模型的宽高计算

定位方式除了上面这种方式，还有另一种奇技淫巧:

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

缺点：子元素有多个的时侯，存在重叠问题

表格布局

表格实际上越来越少用到了，可能会有潜在bug。目前没发现吧

父元素

display: table-cell;
text-align: center;
vertical-align: middle;

子元素

行内元素无需调整，块级元素需要加上display: inline-block

伪元素+vertical-align

这个我是真的服了，奇技淫巧系列

父元素

text-align: center;

伪元素

content: '';
background-color: green;
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;

子元素

vertical-align: middle;

因为vertical-align实际上是给行内元素用的，所以块级元素需要额外加上inline-block