CSS居中方式(一)
文章目录
- CSS居中方式
- 一、水平居中
- a. 内联元素水平居中
- b. 块级元素水平居中
- c. 多块级元素水平居中
- 使用inline-block
- 使用display:flex
- 二、垂直居中
- a. 单行内联(inline-)元素垂直居中
- b. 多行元素垂直居中
- 利用表布局
- 利用flex布局
- 利用“精灵元素”**【未使用过】**
- c. 块级元素垂直居中
- 固定高度的块级元素
- 未知高度的块级元素
- 三、水平垂直居中
- a. 固定宽高元素水平居中
- b. 未知宽高元素水平垂直居中
- c. 利用flex布局
- 利用grid布局【未使用过】
- d. 屏幕上水平垂直居中
CSS居中方式
15种css居中方式 - 王子乔 - 博客园 (cnblogs.com)
一、水平居中
a. 内联元素水平居中
text-align:center;
【注:对于内联元素(inline)、内联块(inline-block)、内联表(inline-table)、inline-flex元素水平居中可行】
b. 块级元素水平居中
margin:0,auto;
【注:将固定宽度块级元素的margin-left和margin-right设置为auto,即可使块级元素水平居中】
c. 多块级元素水平居中
使用inline-block
.container {text-align: center; } .inline-block {display: inline-block; }
【注:如果一行中有两个或两个以上的块级元素,通过设置块级元素的显示类型为
inline-block
和父容器的text-align
属性从而使多块级元素水平居中】使用display:flex
.flex-center {display: flex;justify-content: center; }
【注:利用弹性布局(
flex
),实现水平居中,其中justify-content
用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式,本例中设置子元素水平居中显示】
二、垂直居中
a. 单行内联(inline-)元素垂直居中
#v-box {height: 120px;line-height: 120px;
}
【注:通过设置内联元素的高度(height)和行高(line-hight)相等来使元素进行垂直居中】
b. 多行元素垂直居中
利用表布局
.center-table {display: table; } .v-cell {display: table-cell;vertical-align: middle; }
【注:利用表的布局vertical-align:middle来实现子元素的垂直居中】
利用flex布局
.center-flex {display: flex;flex-direction: column;justify-content: center; }
【注:利用flex布局实现垂直居中,其中
flex-direction: column
定义主轴方向为纵向】利用“精灵元素”【未使用过】
.ghost-center {position: relative; } .ghost-center::before {content: " ";display: inline-block;height: 100%;width: 1%;vertical-align: middle; } .ghost-center p {display: inline-block;vertical-align: middle;width: 20rem; }
【注:利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的】
c. 块级元素垂直居中
固定高度的块级元素
.parent { position: relative;}.child { position: absolute; top: 50%; height: 100px; margin-top: -50px;}
【注:知道居中元素的高度和宽度,垂直居中问题就很简单。通过绝对定位元素距离顶部50%,并设置
margin-top
向上偏移元素高度的一半,就可以实现垂直居中了】未知高度的块级元素
.parent { position: relative;}.child { position: absolute; top: 50%; transform: translateY(-50%);}
【注:当垂直居中的元素的高度和宽度未知时,我们可以借助CSS3中的
transform
属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题】
三、水平垂直居中
a. 固定宽高元素水平居中
.parent {position: relative;}.child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px;}
【注:通过margin平移元素整体宽度的一半,使元素水平垂直居中。】
b. 未知宽高元素水平垂直居中
.parent { position: relative;}.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
【注:使用2D变换,在水平和垂直两个方向都向反向平移宽高的一般,重而使元素水平垂直居中】
c. 利用flex布局
.parent { display: flex; justify-content: center; align-items: center;
}
【注:利用flex布局,其中justify-content
用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式;而align-items
属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。】
利用grid布局【未使用过】
.parent { height: 140px; display: grid;}.child { margin: auto;}
【利用grid实现水平垂直居中,兼容性较差,不推荐】
d. 屏幕上水平垂直居中
.outer { display: table; position: absolute; height: 100%; width: 100%;}.middle { display: table-cell; vertical-align: middle;}.inner { margin-left: auto; margin-right: auto; width: 400px;}
【屏幕上水平垂直居中十分常用,常规的登录及注册页面都需要用到。要保证较好的兼容性,还需要用到表布局】
CSS3的flex,transform,grid等内容都存在兼容性问题
CSS居中方式(一)相关推荐
- 快来学习一下吧!Web前端开发CSS居中的五大方式
学习css大家是不是对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?今天小编在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望 ...
- 伪元素在父元素中居中_web前端Html5开发CSS之元素五大居中方式,实用又简单!...
大家是不是对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?今天小编在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望对迷茫的有 ...
- css样式高居中,CSS居中的几种方式
本文主要总结几种常见的CSS居中方式,下面我准备分为三个方向来写,分别是水平居中,垂直居中,水平垂直居中. 水平居中 1.inline元素如何实现水平居中?(text-align:center) 2. ...
- 15种CSS居中的方式
简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...
- 【基础】这15种CSS居中的方式,你都用过哪几种?
简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...
- css样式标签或者文本居中方式,高度100%居中,水平垂直居中
1.margin居中 margin: 0 auto; 上下0,左右自适应 文本居中方式: text-align: center; 有height高度的居中方式:line-height: 100px; ...
- CSS 居中方法集锦
CSS 居中方法集锦 记录收集纯CSS层面实现的水平.垂直居中方法可用于块级.行内快.内联元素以及文字图片等. 水平或垂直居中 1.1 text-align 1.2 margin 1.3 line- ...
- 【CSS】CSS 层叠样式表 ② ( CSS 引入方式 - 内嵌样式 )
文章目录 一.CSS 引入方式 - 内嵌样式 1.内嵌样式语法 2.内嵌样式示例 3.内嵌样式完整代码示例 4.内嵌样式运行效果 一.CSS 引入方式 - 内嵌样式 1.内嵌样式语法 CSS 内嵌样式 ...
- CSS(一):CSS概述、CSS引入方式、CSS优先级、CSS代码格式、CSS属性;CSS选择器;尺寸和颜色单位、背景和文本设置
目录 一.CSS 1.1 CSS概述 1.1.1 定义 1.1.2 特征 1.1.3 组织网页的两种常用方式 1.2 引入CSS的四种方式 1.2.1 Style属性方式(内联样式) 1.2.2 St ...
最新文章
- Modeling System Behavior with Use Case(3)
- 通过Java字节码发现有趣的内幕之String篇(上)(转)
- NSURLSession和NSURLConnection
- 微信开发者工具 wxmi修改模版颜色_十款高效好用的在线网页工具,提升你的办公效率...
- mvc ajax post json数据,springmvc解决ajax post json格式数据的跨域问题
- html双击单元格修改,JS实现鼠标双击选中表格单元格代码
- oracle下拉菜单多选,多选下拉控件的使用(select-option)multiple-select
- xshell 连接错误: Could not connect to '127.0.0.1' (port 22): Connection failed.
- 复仇者联盟4预售火爆 一张票在eBay上最高炒至500美元
- 如何生成SSH key
- stata--异方差检验
- java offset什么意思_java – “offset或count可能接近-1 1”这是什么意思
- 区块链技术中隐私计算的技术特点
- php表格弄成隔两行变色,Excel表格实现隔行填充背景颜色的三种方法
- 如何快速通过pmp考试求攻略
- Python带你了解数据结构【二】
- 在html中怎么设置段落的边框线,Word怎么设置文字段落边框和底纹
- 精通CSS-添加样式
- 登高望远,一文解答 2023 年你最关心的前端热点问题
- php绕过refer,绕过referer检测url跳转