css 垂直居中_html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中,在工作中,会经常遇到。它可以分为水平居中和垂直居中,以下是几种实现居中的方式。
以下例子中,涉及到的CSS属性值。
.parent-frame { width: 200px; height: 200px; border: 1px solid red; } .child-frame { width: 100px; height: 100px; border: 1px dotted blue; }
1: text-align:center,水平居中
块状元素,水平居中
子元素水平居中 块状元素,水平居中
子元素水平居中
块状元素,水平居中
2:margin: 0 auto,水平居中
水平居中。上下外边框距为0,左右外边距浏览器会自动计算平分
子元素水平居中 块状元素,水平居中
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节
子元素水平居中
块状元素,水平居中
3:line-height值,垂直居中
垂直居中。line-height属性,设置行间的距离(行高)。不允许使用负值。
单行文本的元素才适用,多行元素中不适用这种方法。元素内容是单行,并且其高度是固定不变的,
line-height值=父height值
line-height值=父height值
4: 使用float属性,配合relative定位,实现水平居中
给父元素设置float,然后将父元素整体向右移动50%,再将子元素整体向左移动50%,来实现水平居中。
记得将父元素清除浮动。
虽然宽度不同weiqinl
但一样
水平居中了
使用float属性,记得清楚浮动
虽然宽度不同weiqinl 但一样 水平居中了 使用float属性,记得清楚浮动
5:使用table布局,默认垂直居中
table默认垂直居中vertical-align:middle。如果还想要水平居中,那就是行内元素,添加属性text-align: center
table默认垂直居中[vertical-align: middle] | 水平居中添加text-align:center |
6: 仿table,display:table-cell。并使用vertical-align属性,实现垂直居中
该属性设置元素的垂直对齐方式。
定义行内元素的基线相对于该元素所在行的基线的垂直对齐。在表单元格中,这个属性会设置单元格框中的单元格的对齐方式。
仿table: display:table-cell垂直居中vertical-align:middle
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节
仿table: display:table-cell垂直居中vertical-align:middle
7: 使用absolute绝对定位,配合margin使用,实现水平垂直居中
相对应于relative的绝对定位absolute,需要定宽。同时,top/bottom应该相等,并且相加不超过定宽度。 right/left也应该相等,并且相加不超过定宽。
再配合margin: auto使用
利用绝对定位,配合margin:auto自动计算外边距。
定宽元素,需要确定的尺寸。relative是为了给子元素定位用。
利用绝对定位,配合margin:auto自动计算外边距。 定宽元素,需要确定的尺寸。relative是为了给子元素定位用。
8: 使用absolute绝对定位,配合margin的负值(negative margins)来实现水平垂直居中。
negative margins负边距,会使结构塌陷,利用这个特点来实现。
利用绝对定位,配合margin的负值来实现居中。
负边距来实现,水平垂直居中。需要知道该元素的具体大小
利用绝对定位,配合margin的负值来实现居中。 负边距来实现,水平垂直居中。需要知道该元素的具体大小
9: 使用absolute绝对定位,配合translate 移动转换,实现水平垂直居中
使用百分比来绝对定位一个元素,并配合使用translate,将元素移动定位居中。
利用绝对定位,配合translate移动到水平垂直居中。
不需知具体大小。支持IE9+及现代浏览器
利用绝对定位,配合translate移动到水平垂直居中。 不需知具体大小。支持IE9+及现代浏览器
10: 使用flex布局,设置其属性justify-content,align-items都为center,实现水平垂直居中
父元素使用flex布局,并定义两个属性值justify-content,align-items都为center,那么就定义为水平垂直居中
justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。
使用flex布局,justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。 两个属性都居中,则水平、垂直居中对齐
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节
使用flex布局,justify-content属性定义了项目在主轴上的对齐方式。 align-items属性定义项目在交叉轴上如何对齐。 两个属性都居中,则水平、垂直居中对齐
11: 利用flex布局,配合margin:auto使用,实现水平垂直居中。
父元素使用flex布局,子元素使用margin: auto
父元素使用flex布局,子元素配合margin:auto使用
父元素使用flex布局,子元素配合margin:auto使用
css 垂直居中_html中div使用CSS实现水平/垂直居中的多种方式相关推荐
- CSS Transform让百分比宽高布局元素水平垂直居中
CSS Transform让百分比宽高布局元素水平垂直居中 很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高 ...
- div水平垂直居中 div相对于父元素水平垂直居中 div相对于网页水平垂直居中
div相对于父元素水平垂直居中(相对网页水平垂直居中在下面) 弹性布局 父元素作为容器设置宽高.弹性布局.水平轴和交叉轴居中 display:flex; justify-content:center; ...
- html中位div添加水平线,html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. 以下例子中,涉及到的CSS属性值. .parent-frame { width: 200px; heig ...
- 在html中div水平垂直css,html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码 配合在线预览,效果更佳 以下例子中,涉及到的CSS属性值. .parent-frame ...
- 在css的框中打文字,css 边框上如何写入文字?
方法一: 1.首先,打开html编辑器,新建html文件,例如:index.html. 2.在index.html中的 标签中,输入html代码:. 文字 3.浏览器运行index.html页面,此时 ...
- frontpage css,在Frontpage 中定义网页CSS样式
[点评] 相关网页设计频道网页设计培训网页设计网上培训综合辅导说明:目前Frontpage的最新版本是FrontpageXP(Frontpage 2003),本文是以Frontpage2000讲述的, ...
- frontpage css,在Frontpage 中定义网页CSS样式
您可能感兴趣的话题: FrontPage 核心提示:说明:目前Frontpage的最新版本是FrontpageXP(Frontpage 2003),本文是以Frontpage2000讲述的 说明:目前 ...
- CSS系列之你能实现多少种水平垂直居中的布局
文章の目录 1.定宽高 1.1.绝对定位和负 margin 值 1.2.绝对定位 + transform 1.3.绝对定位 + left/right/top/bottom + margin 1.4.f ...
- html引入css js,html中如何调用css和js?
html中如何调用css和js?下面本篇文章就来给大家介绍一下在html中调用css和js的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在HTML中调用css的方法 行内样 ...
最新文章
- 2013年10月1日C#随机数
- Ubuntu 20.04上安装Git方法
- Centos7 上安装 mysql5.7
- sqlserver的事务回滚和设置事务保存点操作
- H5移动端网页标签模板
- Buuctf(pwn)ciscn_2019_n_8
- markdown如何设置图片大小_Markdown编辑知乎文章的完全攻略
- ASP.NET 数据库缓存依赖
- Atitit mysql 数据类型 5.7.9 目录 1.1. 数值类型	1 2. 字符串	2 3. 时间日期	2 4. 地理位置	2 5. 几何数据的存储,生成,分析,优化。 空间数据类型(存储)
- 矩阵运算(一)最小二乘法
- cookie登陆qq空间的两种方式
- 为什么要在信号线上串联一些小电阻
- 华为服务器怎么连接显示器,显示器怎么连接云服务器
- 拼图 html5,HTML5 拼图游戏
- 绿色开发关乎准东未来
- 读不完《程序员修炼之道》,至少可以读完这70条
- 蓝桥杯(Java) 回文日期
- docker(十)—— Windows系统下安装docker
- CephFS 介绍及使用经验分享
- Java项目:基于SSM的婚纱影楼管理系统(计算机毕业设计)
热门文章
- php mysql登陆页面完整代码_求助:PHP实现登陆注册的代码是什么啊(主要是数据库那块)?...
- python直接连接oracle_python连接oracle
- Zookeeper基础常用操作以及ACL权限
- Bootstrap静态cdn
- 伪代码就是计算机语言 正确吗,伪代码实例绍.ppt
- 引入静态变量_Common Lisp变量的一些事情
- mysql属于数据库三级模式_数据库系统的三级模式指的是什么
- java数据类型_JAVA基础篇(数据类型)
- python自动化框架pytest pdf_Python 自动化测试框架 unittest 和 pytest 对比
- a byte of python图书购买_A Byte of Python