摘要：设置，相当于是表格的，单元格所包含的内联元素可以实现垂直居中。使用居中这个不多说了下面的实现方法，相对来说不那么常规内联元素实现居中这种方法需要多加一个内联元素，让它的高度和父级元素的高度一致，再通过来实现。
垂直居中在项目中有广泛应用，而且在各个公司面试中貌似被问到的情况也比较多，这里总结了一些常用的方法以及一些比较怪异的方法，仅供参考。
先设置下基础样式
section {
width: 300px;
height: 300px;
background: #03A9F4;
}
.block {
width: 50px;
height: 50px;
color: #fff;
background: #FFCA28;
}
使用flexbox
flexbox是我现在最常用的布局方法，可以设置justify-content和align-items轻松实现水平以及垂直居中，而且不用在意父元素和子元素的高度。
table-cell
设置display: table-cell，相当于是表格的td，单元格所包含的内联元素可以实现垂直居中。
子元素绝对定位
子元素相对于父元素绝对定位，再将子元素位置适当调整，两种调整方式：
负margin，适用子元素宽高已知情况
translate变换，可以调整未知大小的块
line-height
line-height可以改变行高，可以使内联元素居中，需要已知父元素的高度
动态计算
基本思路是子元素相对父级绝对定位，根据父元素宽高和自身大小改变left和top值。
这里可以使用calc()方法，但需要已知子元素宽高。
如果子元素大小不确定，可以使用JS来改变位置。
这个不多说了
下面的实现方法，相对来说不那么常规
内联元素实现居中这种方法需要多加一个内联元素，让它的高度和父级元素的高度一致，再通过vertical-align: middle来实现。
利用缩放
本质上是改变了元素的大小，因为transform-origin默认在50% 50%，所以看起来就是居中的效果了
所有可以水平居中的方法这个有点皮
所有实现了水平居中的，可以让父元素旋转90度，子元素再反方向旋转回来
其他想到再补充
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113439.html
摘要：优点写法简单，适应性好缺点兼容性一般，不支持浏览器小节以上共有种方式来实现垂直居中的效果，个人是最青睐第种方式的，兼容性好，适应性好，各位小伙伴还有没有其他的实现方式呢 查看原文可以有更好的排版效果哦 前言 居中是平时工作中的最常见的一种需求，各种图片居中或者各种弹窗，水平居中还好，特别是垂直居中，很多初学者表示太难写了，现在列举一些常用的方法。 实战 这里只讲述css相关的方法，js...
摘要：总结常用垂直居中方法与方法实现居中这是比较常用的方法。绝对居中实现垂直居中这是一个兼容性比较好的能够实现垂直居中的方法。 CSS—总结常用垂直居中方法 1、text-align与line-hight方法实现居中 这是比较常用的方法。通过line-hight来设置行间距是实现垂直居中的关键 .wrap{ width: 500px; heidth: 200px; l...
摘要：水平居中行内元素的水平居中在父元素中设置只对内联元素或行内块元素有效需要放置于父元素中块级元素的水平居中只对块级元素有效指的是自适应宽度。参考张鑫旭实现绝对定位元素的居中及原理居中方式水平居中垂直居中块级元素设置内联元素设置。 原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html 几个月也零零散散学...
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
阅读 3860·2021-11-22 09:34
阅读 2546·2021-11-12 10:36
阅读 598·2021-08-18 10:23
阅读 2423·2019-08-30 15:55
阅读 2853·2019-08-30 15:53
阅读 1965·2019-08-30 15:44
阅读 1197·2019-08-29 15:37
阅读 1156·2019-08-29 13:04
