CSS 实现水平垂直居中的方式

这是面试经常会被问的问题，以前自己也看过相关的博客内容，但总是面试的过程中只能想到简单的几种，今天做一个总结：实现方式分为两类：1、已知元素的宽高确定 2、元素宽高不定（常问）分别对应不同的解决方案已知元素的宽高确定         1、absolute + 负margin        2、absolute + margin auto        3、absolute + calc元素宽高不定        1、absolute + transform        2、lineheight        3、writing-mode        4、table        5、css-table        6、flex        7、grid接下来分别说明：元素高度确定absolute + 负margin     子元素绝对定位，top和left分别为原来的50%， margin-left和margin-top为子元素宽度和高度的一半（具体像素值）absolute + margin auto    子元素绝对定位，设置各个方向的距离都是0，margin设为auto，就可以实现在各个方向上居中absolute + calc     子元素绝对定位，利用css3的计算属性calc，top和left为原来的50%减去子元素宽度和高度的一半，如图： 元素高度不定 absolute + transform     子元素绝对定位，利用css3新增的transform，transform的translate属性也可以设置百分比，其是相对于自身的宽和高，所以可以将translate设置为-50%，就可以做到居中了。如图： lineheight（文本内容水平垂直居中）    利用行内元素居中属性  ，把box设置为行内元素，通过text-align就可以做到水平居中（父元素），通过vertical-align也可以在垂直方向做到居中（子元素）。如图： writing-mode（很少有人知道的属性）    writing-mode可以改变文字的显示方向，比如可以通过writing-mode让文字的显示变为垂直方向（ writing-mode: horizontal-tb;），配合通过text-align就可以做到水平和垂直方向的居中。但是：需要设置层三层结构，第二层垂直居中，第三层水平居中。table     tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中text-align就好了css-table     css新增的table属性，可以让我们把普通元素，变为table元素    父元素  display: table-cell;                    text-align: center;                vertical-align: middle;    子元素： display: inline-block;flex     父元素      display: flex;                    justify-content: center;                    align-items: center;grid     css新出的网格布局，兼容性不太好    父元素   display: grid;    子元素  align-self: center;     justify-self: center;这是目前总结出的css实现水平垂直居中的方案，如果还有其他方式，欢迎补充！

本文章由javascript技术分享原创和收集