几种常见的居中方式总结

长路漫漫

初学前端，说的不对望大家指点出来。放下你的砖头。

在页面布局中我们经常遇到元素居中问题：

• 水平居中
• 垂直居中
• 水平垂直居中

水平居中

• inline/inline-block + text-align

1. 概况：对子元素设置display：inline/inline-block，对父级元素设置text-align： center；
2. 详解：text-align概念：
   CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align
   并不控制块元素自己的对齐，只控制它的行内内容的对齐。
   这里说明使用这种方法实现居中必须具备几点：

• 父元素是块元素
• 子元素是行内元素 常见的行内元素方法：display：inline/ inline-block

inline/inline-block + text-align

效果

• 绝对定位

1. 已知元素的宽度和高度
   当我们已知子元素的宽度以及高度的时候就可以使用负margin方法将元素居中；
   说明：这里使用父级元素position: relative子元素position：absolute；
   原因是我们要使用绝对定位；使子元素的left值为父元素的50%；即 left:50%
   这样结果子元素的左侧就在父元素的距离50%的位置;

left:50%效果

这样其实并不是我们想要的效果，我们需要子元素整体居中，这时候就需要使用margin将元素放置到正确的位置；我们将子元素的margin设为 -width/2；成了！

效果

负margin

2. 未知子元素的宽高；
   原理都是一样的，只不过这一次我们不知道元素的宽度以及高度；那么就不能使用负margin；这时候css3一个方法：transform:translate() 就可以排上用场；
   首先了解一下概念：

• CSS transform 属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）.
• CSS transform 属性 , 只对 block 级元素生效！
• 这里我们使用translateX() 指定元素向X方向平移；
  那么这不就和负margin一个道理么，搞起！

transform

效果

• table-cell
  将元素设置为display:table-cell mdn上是这样介绍table-cell的；

table-cell

这是什么意思；赶紧看看td的文档；这里我发现 td可以使用 text-align；vertical-align 属性;赶紧试试！

table-cell

效果

• flexbox
  先放上资源：

1. 阮一峰Flex布局
2. mdn
   就是我们常说的flex布局了；移动端布局的拯救者；
   让我们来试试！

flex

效果

• grid 布局
  笔者还没看过文档；看了之后这段补上，献上兼容性；

grid

暂时就能想到这几种方法；肯定还有别的方法。欢迎大家补充；-_-

下面的内容就从简了，基本原理都一样；

垂直居中

• vertical-align ：middle
  注意必须在父元素中指定line-height否则vertical-align不起作用；

vertical-align

效果

• 固定宽高垂直居中

负margin

效果

• 未知宽高 transform

transform

效果

• table-cell

table-cell

效果

• flex

flex

效果

水平垂直居中

• table-cell + text-align + vertical-align
  父级元素table-cell
• block + 负margin / transform

1. 定宽定高元素 负margin

负margin

效果

2. 未知宽高 transform
   通过使用css3属性对元素进行变换

transform

效果

• flex
  使用flexbox对元素进行居中

flexbox

效果

奉上部分练习代码

github