水平垂直居中真的那么难？

作者：myprelude@github
原文链接： https://myprelude.github.io
转载请注明出处，保留原文链接和作者信息。

现在如果哪套前端面试题没有一个居中的问题，我们都要去质疑是不是前端面试题。由此可见垂直居中的重要性。

为啥水平垂直居中这么重要

1.从美学的角度来说；对齐，居中，对称，非常重要，就算是设计的水平很差的人只要把握好这个要素都能搞出一个好看的东西。我们ui设计师更是深得其精髓。
2.从布局的角度来说；每个人的电脑显示屏大小都不一样，将页面核心区域放到页面中心，周围留白或者铺上背景图什么的，在显示器大小变化时至少不影响核心区域。
3.从用户角度来说；居中更容易被用户关注到。
。。。。。。

水平居中

<div class='parent'>
    <div class='block'></div> // 1
    <span class='inline'></span> // 2
    需要水平居中的文字  // 3
</div>

解决方案

水平居中无非就是上面这几种情况，

1: 子元素是块元素

.block{
  width:100px;  // 这里一定要给定宽度
  margin：0 auto；
}

2: 子元素是行内元素 3: 子元素是文字；
```
.parent{
  text-align:center;
}
```
水平居中比较简单，上面基本上解决所有问题。没有必要为了多搞几种方式使用posiition，transfrom + 负margin。如果子元素有很多的话，我推荐使用flex布局.

垂直居中HTML布局

<div class='parent'>
    <div class='block'></div> // 1
    <span class='inline'></span> // 2
    需要垂直居中的文字  // 3
</div>

解决方案

table 大法

.parent{
  display:table-cell;
  vertical-align:middle;  // 都什么年代了还是不要用了
}

position 大法

.parent{
  position:relative;
}
.block,.inline{
  height:100px;  // 已知需要居中元素的高度
  position:absolute;
  top:50%;
  margin-top:-50px; // height/2
}

position + transform 大法

.parent{
  position:relative;
}
.block,.inline{
  height:?;  // 不需要知道居中元素的高度
  position:absolute;
  top:50%;
  transform:translate(0%,-50%);
}

flex 大法

.parent{
  display:flex;
  align-item:center;
}
或者
.block,.inline{
  align-self:center;
}

line-height 大法(只针对需要居中的元素是文字)
```
.parent{
  height:20px;
  line-height:20px;
}
```
注意：line-height：在大部分情况下我们都可以居中文字，但是在手机端如果字体小于12px后，在android和ios上表现都不居中，一个偏上一个偏下。如何解决这个呢？如果ued同意的情况下尽量让line-height、height大一点这样这样就可以忽略偏差了，还有一个hack方案就是针对Android 和 ios 写两套line-height 一个小点一个大点。

水平垂直居中

table布局都什么年代了这个就不说了，喜欢的自己科普。

position + transform

.parent{
  position:relative;
}
.block,.inline{
  height:?;  // 不需要知道居中元素的高度
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

缺点：如果子元素有其他transform属性的话，处理起来就很麻烦

flex 大法
```
.parent{
  display:flex;
  align-item:center;
  justify-content:center;
}
```
简单完美，不考虑上古浏览器的话我们可以愉快的玩耍了；手机端的小伙伴随便用。

-->

myprelude

为啥水平垂直居中这么重要

水平居中

解决方案

垂直居中HTML布局

解决方案

水平垂直居中

相关推荐