html 水平垂直居中,css水平垂直居中有几种实现方式?
项目中经常碰到需要实现水平垂直居中的样式。下面就总结几种常用的方法
css水平垂直居中有几种实现方式?
1、水平对齐+行高
【思路一】text-align + line-height实现单行文本水平垂直居中
.f10 .test{
text-align: center;
line-height: 100px;
}
2、水平+垂直对齐
【思路二】text-align + vertical-align
(相关课程推荐:css视频教程)
【1】在父元素设置text-align和vertical-align,并将父元素设置为table-cell元素,子元素设置为inline-block元素
[注意]若兼容IE7-浏览器,将结构改为
【2】若子元素是图像,可不使用table-cell,而是其父元素用行高替代高度,且字体大小设为0。子元素本身设置vertical-align:middle
.f12 .parent{
line-height: 200px;
text-align: center;
font-size:0;
}
.f12 .child{
vertical-align: middle;
}
3、margin + vertical-align
要想在父元素中设置vertical-align,须设置为table-cell元素;要想让margin:0 auto实现水平居中的块元素内容撑开宽度,须设置为table元素。而table元素是可以嵌套在tabel-cell元素里面的,就像一个单元格里可以嵌套一个表格
[注意]若兼容IE7-浏览器,需将结构改为
4、绝对定位
【1】利用绝对定位元素的盒模型特性,在偏移属性为确定值的基础上,设置margin:auto
.f14 .parent{
position: relative;
}
.f14 .child{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 50px;
width: 80px;
margin: auto;
}
【2】利用绝对定位元素的偏移属性和translate()函数的自身偏移达到水平垂直居中的效果
[注意]IE9-浏览器不支持
.f15 .parent{
position: relative;
}
.f15 .child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
5、flex
[注意]IE9-浏览器不支持
【1】在伸缩项目上使用margin:auto
.f16 .parent{
display: flex;
}
.f16 .child{
margin: auto;
}
【2】在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items
.f17 .parent{
display: flex;
justify-content: center;
align-items: center;
}
6、grid
[注意]IE10-浏览器不支持
【1】在网格项目中设置justify-self、align-self或者margin: auto
.f18 .parent{
display: grid;
}
.f18 .child{
align-self: center;
justify-self: center;
}
【2】在网格容器上设置justify-items、align-items或justify-content、align-content
.f19 .parent{
display: grid;
/*align-items: center;*/
/*justify-items: center;*/
align-content: center;
justify-content: center;
}
本文来自css3答疑栏目,欢迎学习!
html 水平垂直居中,css水平垂直居中有几种实现方式?相关推荐
- div垂直居中-CSS元素垂直居中方法
div垂直居中-CSS元素垂直居中方法分2类: 1.文本垂直居中的解决方案-2种 https://edu.csdn.net/course/play/9950/211677 2.块级元素垂直居中的解决方 ...
- [css] 说下line-height三种赋值方式有何区别?
[css] 说下line-height三种赋值方式有何区别? line-height 可以有带单位及不带单位的写法(感觉其实是两种).div{line-height: 24px;line-height ...
- 简述css属性选择器的几种定义方式_CSS基础试题
一.单选题 1.CSS是利用( B )XHTML标签构建网页布局. A. C. D. 2.在CSS语言中下列哪一项是"左边框"的语法( C ) A.borde ...
- 简述css属性选择器的几种定义方式_css的四种使用方式 css规则按选择器类型分为那四种...
HTML中嵌入CSS的四种方式及优先级,如何选择 1. 行内样式行内样式就是把 CSS 样式直接放在代码行内的标签中,一般都是放入标签的style属性中,由于行内样式直接插入标签中,故是最直接的一种方 ...
- html div中css设置平均水平分布,CSS - 水平和垂直分布div
4 个答案: 答案 0 :(得分:2) 首先,您可以使用Flexbox以更好的方式获得相同的结果. 对于垂直对齐文本到中间,您可以通过添加line-height属性并将其设置为容器div的相同精确高度 ...
- HTML+CSS中常见的几种居中方式
前言 在HTML+CSS网页制作开发中经常使用居中操作,实现方式更是多种多样,为了方便大家学习,文章将为大家介绍几种最常见的水平居中方式以及水平+垂直居中方式,比较适合初学者使用. 一.水平居中 方法 ...
- css画扇形的几种实现方式
前言 前两天做了360前端星技术测验,其中有个UI效果实现是这样的 (请实现如图warning标志,其中圆的半径是100px,并且保证圆始终垂直居中页面显示) 核心技术难点是: 1. 扇形的实现 2. ...
- css:居中的几种布局方式
居中布局的方式 初始状态 <!DOCTYPE html> <html lang="en"> <head><style>.outer ...
- 简述css属性选择器的几种定义方式_CSS 属性选择器详解
根据具体属性值选择 除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素. 例子 1 例如,假设希望将指向 Web 服务器上某个指定文档的超链接变成红色,可以这样写: a[h ...
最新文章
- 比特币现金之城——北昆士兰
- 快速部署ldap服务
- 小议如何跳出魔改网络结构的火坑
- 3Dslicer +VS2013编译介绍
- kubernetes(k8s)-介绍2
- 【bzoj5173】[Jsoi2014]矩形并 扫描线+二维树状数组区间修改区间查询
- php 获取城市列表接口,省份城市区域列表
- 整理wind商誉数据2016-2019
- Godaddy绑定手机遗失,成功申诉取消手机两步验证全过程
- 一个关于动漫的小程序
- 攻防世界pwn高手进阶(持续更新)
- 检查两个时间段是否有时间重叠(允许重叠一部分时间不算重叠)
- 多家支付机构叫停网络销售POS机 但“POSS机”“破死机”还在
- 重磅 | 完备的 AI 学习路线
- 微信聊天气泡随意换,一键制作超级简单,让聊天不再枯燥!
- sklearn的分层抽样
- 电大计算机科学与技术课程,大学计算机科学与技术专业(本科)专业课程设置及教学管理...
- 【什么情况下U盘会出现0字节?】
- 有没有计算机的毕业设计选题好点子?
- 网络设备割接—七大步骤
热门文章
- 《数据库原理与应用(第3版)》——习题
- php过滤html标签截取部分内容
- SQL Server-聚焦SNAPSHOT基于行版本隔离级别详解(三十)
- mysql 存储引擎 介绍
- 论Java程序的运行机制
- Redhat5.4 LAMP配置
- 计算机的桌面教案,《认识计算机桌面》教案-20210608141312.pdf-原创力文档
- mysql char 和varchar哪种效率高_MySQL数据库中的字段类型varchar和char的主要区别是什么?那种字段的查找效率要高,为什么?...
- 麦克风阵列降噪_黄鹂智声降噪耳机E100u,与喧嚣说再见
- java rw_Java基础之I/O流详解