div垂直居中的方法
　　居中当宽度固定时
  1、absolute + margin 负值
  绝对定位在这个例子中会设置top:50%来抓取空间高度的50%，接着在将居中元素的margin-top设定为负一半的高度，这样就能让元素居中了,这种方式比较常见
  2.absolute + margin auto
  又一个绝对定位的垂直居中的方案，这个方式比较特别一点，当元素设置为绝对定位后，假设它是抓不到整体可运用的空间范围，所以margin:auto会失效，但当你设置了top:0;bottom:0;时，绝对定位元素就抓到了可运用的空间了，这时你的margin:auto就生效了(神奇吧)，如果你的绝对定位元素需要水平居中于父层，那你同样可以设定left:0;right:0;来让绝对定位元素取得空间可运用范围，再让marign-left与margin-right设定为auto即可居中。但此方式的缺点是你的定位元素必须有固定的宽高(百分比也算)才能正常居中。
  居中当不需要固定宽度时
  3、absolute + translate
  我们用绝对定位时的top与right设置元素的上方跟左方各自设为50%，再利用translate(-50%,-50%)位移居中元素自身宽与高的50%就能达成居中的目的
  4、Flex + align-items
  设定父层display:flex以及设定次轴(cross axis)属性align-items:center ，这个方式的优点是此层不需要设定高度即可自动居中
  此方法我常用
  5、Flex + :before + flex-grow
  Flex有多种方式可以让你把数据居中，适用Flex-grow的延展特性来达成，这个例子中Amos适用了flex-direction:column直式排法，搭配:before伪元素适用flex-grow伸展值能够取得剩下所有空间的特性，把它设定成一半的剩余空间就能做到把内容数据准确的推到垂直中间位置，算是个传统技法的延伸方式。
  6、Flex + margin
  继续用Flex来居中，由于Flex元素对空间解读的特殊性，我们只要在父层元素设定display:flex，接着在需要垂直居中的元素上设定margin:auto，即可自动居中
  7.Flex + align-self
  对flex次轴cross axis 的个别对齐方式只要对单一子层元素设定align-self:center就能达成垂直居中的目的
  8. Grid + template ( Grid 网格布局 )
  它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。
  9.Grid + align-items
  align-items属性设置单元格内容的垂直位置(上中下)。align-items不仅是Flex可用，连CSS Grid也拥有此属性可使用，但在Flex中align-items是针对次轴cross axis作对齐，而在
CSS Grid中则是针对Y轴做对齐。
  10、Grid + align-content
  CSS Grid的align-content跟Flex的align-content有点差异，CSS Grid对于空间的解释会跟Flex有一些些的落差，所以导致align-content在Flex中仅能针对多行元素起作用，但在Grid中就没这个问题，所以我们可以很开心的使用align-content来对子元素做垂直居中
  11.Grid + align-self
  基本上就是对grid Y轴的个别对齐方式，只要对单一子层元素设置为align-self:center就能达成垂直居中
  12、Grid + place-items
  place-items这属性不知道有多少人用过，此属性是align-items与justify-items的缩写，简单的说就是水平与垂直的对齐方式，想当然的，设定center就能居中
  13. Grid + place-content
  place-content这属性有多少人用过，此属性是align-content与justify-content的缩写，简单的说就是水平与垂直的对齐方式，想当然的，设置center就能居中
  14.Grid + margin
  继续用Grid来居中，由于Grid元素对空间解读的特殊性，我们只要在父层元素设定display:grid，接着在需要垂直居中的元素上设置margin:auto即可自动居中。
  15.Display：table-cell
css设置文字垂直居中
  display属性将div设置成表格的单元格，这样就能利用支持存储单元格对齐的vertical-align属性来将信息垂直居中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。