面试官：居中对齐有哪些实现方式？

不要屈从，不要流泪，不要试着合乎情理，不要为了媚俗而去改变你的灵魂；相反，果断地追随让你强烈痴迷的事物。——卡夫卡

在网页设计中，时常会有居中的样式需求。

 居中，兼具汇聚、对称的美感。

而在前端开发中，通过css样式实现元素居中有多种方式。

水平居中（Center Horizontally）

1.行内级（内联）元素:

• 设置父级元素text-align属性为center。

2.块级元素：

• 设置当前块级元素(宽度) margin: 0 auto;

3.绝对定位

• 元素不知宽度情况下（或者不想考虑元素宽度）, left: 0;right: 0; margin: 0 auto;
• 元素已知宽度可以，left: 50%; margin-left: 负值; （负值为元素宽度一半）

4.flex

• justify-content: center;

垂直居中（Center vertically）

“44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中 实现垂直居中。”

 --Jams Anderson

1.行高(令单行文字垂直居中)

令line-height = 文字所在盒子高度，文字将垂直居中显示。

2.绝对定位

• 元素有高度情况下, top: 0;bottom: 0;margin: auto 0;

• 缺点:

  (1) 必须使用定位(脱离标准流)。

  (2) 需要给元素设置高度。

3.flex布局

align-items:center;

• 缺点: flex container中所有的元素都会垂直居中显示。

4.定位加形变 position/translate

分两步走

1.让需要居中的元素向下位移父级元素content高度的50%。

2.让需要居中的元素向上位移自身高度的50%。

margin-top的百分比是相对于包含块(父元素)的宽度。

margin-top: 50%; 
position: relative;
top: 50%;
transform: translate(0, -50%);`

其中水平居中的margin-left负值方案可换成margin-top负值使得垂直居中；

垂直居中的translate方案同样可用于水平居中。

更多方法总结参考