前端:水平垂直居中的10种方法
第一种: 通过绝对定位的方式 absolute + 负margin
首先知道子元素的宽高,给子元素设置top:50%;left:50%,
但绝对定位是基于子元素的左上角,我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值,负的外边距可以让元素向相反方向定位,
通过指定子元素的外边距为子元素宽度一半的负值,就可以让子元素居中了
优点: 比较好理解,兼容性好
缺点: 需要知道子元素的宽高
第二种: 也是通过绝对定位的方式 absolute + margin auto
这个是需要将各个方向的距离都设0,再讲margin设为auto;就行
优点: 兼容性也很好
缺点: 需要知道子元素的宽高
第三种: absolute + calc(计算)
这种方法top的百分比是基于元素的左上角,那么在减去宽度与高度的一半就好了
calc :任何长度值都可以使用calc()函数进行计算;
calc()函数使用标准的数学运算优先级规则;
它支持 “+”, “-”, “*”, “/” 运算
也可以查看calc教程:https://www.runoob.com/cssref/func-calc.html
优点: 他的兼容性依赖的是calc的兼容性
缺点: 同样是需要知道子元素的宽高
第四种: absolute + transform (过渡)
这个方法不需要子元素固定宽高
修复绝对定位的问题,还可以使用css3新增的transform,transform的translate
属性也可以设置百分比,其是相对于自身的宽和高,所以可以将translate设置为-50%,就可以做到居中了
优点: 代码量少
缺点: IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象.
第五种: line-height
只对文本有效果,对定宽高的div是没有用的。所以在文本水平垂直居中时使用。
优点:代码简洁
缺点:只对文本有效,只对单行文本有效,多行文本不可以
第六种: writing-mode
可以参考:https://www.runoob.com/cssref/css-pr-writing-mode.html
这种方法稍微有些复杂,writing-mode可以改变文字的显示方向
第七种: table 形式
通过table单元格的形式设
优点: tabel单元格中的内容天然就是垂直居中的,只要添加一个水平居中属性就好了
缺点: 这个不是table的正确方法,不是很建议使用,但是也是可以实现的
第八种: table-cell实现水平垂直居中: table-cell middle center组合使用
直接给父级设
display: table-cell;vertical-align: middle;text-align: center;
为了可以明显看出,我们可以给它设个宽高与边框
width: 240px;height: 180px;border:1px solid #666;
第九种: 弹性盒子的方式
通过给父元素设置justify-content: center;
align-items: center;就可以了
优点: 移动端使用灵活自如
缺点: pc端需要根据兼容情况来判定
第十种: grid(网格布局)
给父级设display:grid;
给子元素设align-self: center;justify-self: center;
优点: 代码量少
缺点: 兼容不如flex,建议用flex
前端:水平垂直居中的10种方法相关推荐
- html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相 ...
- CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法 设置行高 使用定位和translate 使用弹性盒子 设置行高 我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
- div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法 文章目录 学习笔记(一) 前言 一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四 二.flex布局法 1.方法五 三.将小div转成行内块 ...
- CSS实现水平垂直居中的五种方法
前言 今天来看看一个之前困扰我很久的问题,在CSS中,水平垂直居中,能有几种写法. 方法一:margin:auto 子绝父相,当元素绝对定位的时候,会根据最近父元素进行定位,利用这个特性,我们有了这种 ...
- php垂直居中代码_图文详解图片水平垂直居中的五种方法(附代码)
在页面布局时经常需要对图片的位置进行处理,这篇文章围绕图片居中展开,主要讲了如何用CSS实现图片的水平居中,图片垂直居中,还有图片的水平垂直居中,课程比较实用,感兴趣的小伙伴,可以参考一下,希望对你有 ...
- 图片水平垂直居中的几种方法总结
1.固定图片大小水平垂直居中,图片300*200 如下: html代码 <div class="con"><img src="images/fengch ...
- html语言div图片垂直居中,图文详解图片水平垂直居中的五种方法
1.text-align:center实现图片水平居中 text-align一般用于文本的水平居中,也可以用于图片,代码如下: CSS部分: div{ text-align:center; width ...
- CSS水平垂直居中的几种方法
我们都知道,固定宽高的 div 在网页中水平垂直居中很简单,相信大家也很容易的写出来,但是不固定宽高的 div 如何水平垂直居中呢?我们在网页布局,特别是手机等 web 端网页经常是不固定宽高的 di ...
- 让一个 div 水平垂直居中的几种方法
水平垂直居中有好多种实现方式,主要就分为两类:不定宽高和定宽高,以在body下插入一个div为例: 定宽高 使用定位+margin element.style {position: absolute; ...
最新文章
- Webpack 资源管理
- python模块介绍-locustio:性能测试工具locustio
- 浏览器上的HTML5语音识别功能实例页面
- maven项目,httpclient jar包冲突
- Windows平台下动态链接库的总结
- bootstrap带有下拉按钮的输入框_关于bootstrap--表单(下拉select、输入框input、文本域textare复选框checkbox和单选按钮radio)...
- 2台电脑一根网线传文件_「教程」如何快速的在两台电脑间传输大文件?
- Python判断两个域名的主域名是否相同
- AMD宣布裁员7% 约710员工将失去工作
- mybatis-config.xml常用的配置信息
- linux中paste的用法,在Linux中使用Paste命令来合并行,包括使用Paste命令技巧及注意事项...
- React 之受控组件和非受控组件
- scala 连接符_Scala标识符示例教程
- WinForm XML
- 智能机器人建房子后房价走势_日本房价走势分析:房产投资是否“未来可期”?...
- 【第105期】游戏策划:应聘简历的附件那些事
- WinDriver linux 安装说明
- SQL语句查询:查询本周过生日的信息
- 微信无法连接服务器1-500,GIF表情超过500kb无法添加到微信的解决方法
- Monjes Budistas - Live Mantra(2008)[古典红底红花边]