居中的几种实现方式

css小技巧之实现居中的几种方式

横向居中

如果需要居中的是内联元素的话，给父级元素加上text-align: center即可。
如果是块级元素，那就给自身加上margin: 0 auto，上下的margin为0，左右auto就会自动居中。
如果多个块级元素放到一行并居中，你可以使用display: inling-block把他们变成内联元素，然后再在父级元素上使用text-aline: center。或者使用flex布局，给父级元素加上display: flex; justify-content: center;

纵向居中

如果是内联元素的话可以让height和line-height值相等。
如果是块级元素的话，绝对定位。给自身加上position: absolute; top: 50%; transform: translateY(-50%)，然后给父元素加上position: realtive;。或者使用flex布局，给父元素加上display: flex; flex-direction: column; justify-content: center;。

横纵都居中

内联元素的话，给父级元素加上text-align: center，然后让自身的height与line-height值相等即可实现。
块级元素同样可以使用绝对定位，给自身加上position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);，然后给父元素加上position: relative。flex布局同样适用，给父元素加上display: flex; justify-content: center; align-items: center;。

不知道算不算是翻译，有的没写上因为感觉适用范围太小。可自行参考css tricks center。