absolute居中，positionabsolute 居中
1、使用 absolute 定位结合 transform 可实现未知宽高元素absolute居中的水平垂直居中，核心原理是通过 top 50% 和 left 50% 将元素左上角定位至父容器中心，再通过 transform translate50%， 50% 将元素自身反向偏移其宽高absolute居中的一半，最终使元素中心与父容器中心对齐具体实现步骤父容器设置相对定位父元素需设置。
2、在CSS布局中，absolute定位元素通过toprightbottomleft属性相对于最近的已定位祖先元素或视口控制位置，结合transform可实现精准居中，并通过zindex管理层级 以下是具体控制方法及注意事项1 定位上下文确定参考基准已定位祖先元素若absolute元素的父级或祖先设置absolute居中了position relativeabsolute。
3、二使用 positionabsolute 当已经知道了要进行水平垂直居中的元素的宽高时，就可以通过设置 position absolute 来实现但是，使用的同时还需要结合其absolute居中他属性才完整实现因为，单是设置 absolute，上左距离均为一半，就会出现下面这种情况很显然可以看到，元素并不是完全居中，仅只有左上角的位置在中心。
4、使用left 50% top 50%配合margin负值将绝对定位元素的left和top属性设置为50%，这会使得元素的左上角移动到其父容器的中心点接着，使用marginleft和margintop的负值来调整元素的位置，负值的绝对值应等于元素宽度和高度的一半，从而使元素完全居中使用top， left， right， bottom 0配合margin。
5、一般地，居中绝对定位元素，left50%top50%再margin负值或者通过transform也可达到效果今天发现另一个技巧，利用，top，left，right，bottom取值0，再maginauto，即可实现居中原因 divbox position relative height 300px background #989eaadivfz width 100px height 100px。
6、因为去掉了absolute，失去了包裹性，所以需要指定width大小margintop设为50vh，表示视口高度的50%位置然后用translateY50%将元素拉上去之所以用translateY因为水平位置已经指定margin为auto实现了居中，所以水平位置不用回拉以上方案各有优缺点，可以根据具体需求和场景选择合适的方案。
7、二常见应用场景下拉菜单通常嵌套在导航栏等深层结构中，通过在其直接父级如导航项设置position relative，子菜单使用absolute定位到下方或右侧模态框需覆盖整个页面时，可将其直接父级设为position fixed视口定位，内部内容用absolute居中角标提示在卡片或按钮的右上角显示提示信息时。
8、前提你要知道你需要居中的块height是多少，比如500px， positionabsolutetop50%margintop250px高度的一半，因为他定位是以块的边定位的，不是正中间top。
9、一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置很多人出错就在于这点上出错而网页居左其特性与Relative很相似，但是还是有本质的区别的Relative，CSS中的写法是positionrelative。
10、元素无固定宽度行内块元素方法给元素添加display inlineblock，并在其外层父元素上添加textalign center原理将元素设置为行内块元素，使其可以像文本一样被父元素的textalign center属性居中示例图片绝对定位元素 方法给元素添加position absolute，并设置top 0 left 0。
11、方法说明通过设置子元素的margin为auto，可以将子元素挤到父级元素的中心位置，实现水平垂直居中特点这种方法利用了flex布局的特性，简洁且有效使用Transform和Absolute定位方法说明常用于图片的居中显示通过设置元素的transform属性，并结合absolute定位，可以实现水平垂直居中特点这。
12、将div的position属性设置为relative，然后使用margin0 auto可以使div在水平方向上自动居中接着，可以通过调整margintop的值来实现垂直方向上的居中使用absolute定位和精细调整如果知道元素和容器的具体尺寸，可以将div的position属性设置为absolute，然后通过设置topleftbottomright属性的值来精细调整。
13、cssbody position relativeheight 100vhcentered position absolutetop 50%left 50%transform translate使用table布局设置父容器将body的display属性设置为table，并设置width为100%，height为100vh设置子元素将需要居中的元素的display属性设置为tablecell，verticalalign属性设置。
14、以下是三种实现CSS上下居中的方法1 使用lineheight属性 适用场景适用于单行文字的上下居中 实现方法将元素的lineheight属性设置为与元素高度相等 注意事项若中间文字包含多行且使用换行显示时，此方法效果可能不佳2 使用absolute positioning 适用场景适用于非文字的上下居中，且元素具有明确。
15、首先，使用flex布局是移动端最常用且兼容性较好的方法父级元素设置为flex容器，子元素即可实现水平垂直居中其次，flex布局的变种是通过设置子元素的margin为auto来实现居中这种方法可以将子元素挤到父级元素的中心位置第三种方法是使用transform和absolute定位这种方法常用于图片的居中显示，通过调整。