垂直居中的几种方式

Steve_Wang_ 发布于2019-08-02 15:57 / 1476人阅读

摘要：总结垂直居中平时一直在用今天将各个类型总结一下通过写些验证加深印象同时转化成自己的理解的方式应该还不完善以后遇到的话再补充吧。

定位方式居中

说明上面方式没有兼容性问题,也不用自己计算。

table-cell方式

说明 table-cell方式兼容性比较好,但是外层标签不能设置定位或浮动,否则middle会失效。当table-cell内部是block元素时,middle也会生效。

内联方式

说明这种方式移动端支持较好,很好用,parent内部无论是块还是内联block熟悉都会生效。关于flex语法介绍。

总结

垂直居中平时一直在用,今天将各个类型总结一下,通过写些验证demo加深印象,同时转化成自己的理解的方式,应该还不完善,以后遇到的话再补充吧。

GPU云服务器云服务器 js继承的几种方式服务器请求的几种方式 java创建对象的几种方式最基本的几种

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54414.html

html的几种水平垂直居中的方式（基础）

摘要：前言我们在编写马过程中，想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。前言我们在编写马过程中，想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。第一种方法 d第一种 .Centered1{ background-color: #800...

Songlcy 2019-08-30 15:44 评论0 收藏0
(面试题)垂直居中的几种实现方式

摘要：尤其是在实际页面中，有很多特殊的场景，导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式。以一道经典面试题为例一个的在一个水平垂直居中，用实现。首先定义元素层和垂直居中无关的样式直接定义在里。相比较水平居中，垂直居中比较复杂点。尤其是在实际页面中，有很多特殊的场景，导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式。以一道经典面试题为例：一个200*2...

cheukyin 2019-08-30 11:18 评论0 收藏0
垂直居中的几种方式

摘要：总结垂直居中平时一直在用今天将各个类型总结一下通过写些验证加深印象同时转化成自己的理解的方式应该还不完善以后遇到的话再补充吧。定位方式居中 .parent{ width: 60px; height: 60px; border: 1px solid palevioletred; ...

YFan 2019-08-29 13:10 评论0 收藏0
css实现垂直居中的几种方式

摘要：单行文本使用我是垂直居中文本使用我是垂直居中文本父元素子元素高度确定高度确定将设置为本元素高度的一半父元素子元素高度不确定我会绝对居中额外元素与上两个原理一样多设置了一个额外元素，使额外元素的为为元素的高度的负一半使用 1.单行文本使用line-height 我是垂直居中文本 //css child{ line-height: 100px; } 2.使用table-cell...

187J3X1 2019-08-30 13:09 评论0 收藏0
垂直居中的几种实现方法？

摘要：结构效果如下优点不用受内容高度的限制，简单实现垂直居中缺点不兼容方法二这个方法使用绝对定位的，把它的设置为，设置为负的高度。这意味着对象必须在中指定固定的高度。使用使块级元素垂直居中是很简单的。方法一：把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align属性。结构效果如下：http://jsfiddle.net/chic/4uduzb3t/1/...

sorra 2019-08-28 17:57 评论0 收藏0