html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中,在工作中,会经常遇到。它可以分为水平居中和垂直居中,以下是几种实现居中的方式。
git 查看源码
配合在线预览,效果更佳
以下例子中,涉及到的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,水平居中
块状元素,水平居中
<div class="parent-frame">
子元素水平居中
<i style="display:block; text-align: center;color: blue">块状元素,水平居中</i>
</div>
块状元素,水平居中
2:margin: 0 auto,水平居中
水平居中。上下外边框距为0,左右外边距浏览器会自动计算平分
<div class="parent-frame">
子元素水平居中
<i class="child-frame" style="display: block;margin: 0 auto">块状元素,水平居中</i>
</div>
块状元素,水平居中
## 3:line-height值,垂直居中
垂直居中。line-height属性,设置行间的距离(行高)。不允许使用负值。
单行文本的元素才适用,多行元素中不适用这种方法。元素内容是单行,并且其高度是固定不变的,
<div class="parent-frame">
<div style="line-height: 200px;">line-height值=父height值</div>
</div>
## 4: 使用float属性,配合relative定位,实现水平居中
给父元素设置float,然后将父元素整体向右移动50%,再将子元素整体向左移动50%,来实现水平居中。
记得将父元素清除浮动。
<div class="parent-frame">
<div style="float: left; position: relative; left: 50%; clear: both;" >
<div style="position: relative; left: -50%">虽然宽度不同weiqinl</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">但一样</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">水平居中了</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">使用float属性,记得清楚浮动</div>
</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">虽然宽度不同weiqinl</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">但一样</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">水平居中了</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">使用float属性,记得清楚浮动</div>
</div>
5:使用table布局,默认垂直居中
table默认垂直居中vertical-align:middle。如果还想要水平居中,那就是行内元素,添加属性text-align: center
<table class="parent-frame">
<tr>
<td>
table默认垂直居中[vertical-align: middle]
</td>
<td style="text-align:center;">
水平居中添加text-align:center
</td>
</tr>
</table>
6: 仿table,display:table-cell。并使用vertical-align属性,实现垂直居中
该属性设置元素的垂直对齐方式。
定义行内元素的基线相对于该元素所在行的基线的垂直对齐。在表单元格中,这个属性会设置单元格框中的单元格的对齐方式。
<div class="parent-frame" style="display: table-cell;vertical-align: middle">
仿table: display:table-cell垂直居中vertical-align:middle
</div>
7: 使用absolute绝对定位,配合margin使用,实现水平垂直居中
相对应于relative的绝对定位absolute,需要定宽。同时,top/bottom应该相等,并且相加不超过定宽度。 right/left也应该相等,并且相加不超过定宽。
再配合margin: auto使用
<div class="parent-frame" style="position: relative">
利用绝对定位,配合margin:auto自动计算外边距。
<div class="child-frame" style="position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;">
定宽元素,需要确定的尺寸。relative是为了给子元素定位用。
</div>
</div>
利用绝对定位,配合margin:auto自动计算外边距。
<div style="width:100px; height:100px; border: 1px dotted blue;position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;">
定宽元素,需要确定的尺寸。relative是为了给子元素定位用。
</div>
8: 使用absolute绝对定位,配合margin的负值(negative margins)来实现水平垂直居中。
negative margins负边距,会使结构塌陷,利用这个特点来实现。
<div class="parent-frame" style="position: relative;">
利用绝对定位,配合margin的负值来实现居中。
<div class="child-frame" style="position: absolute; top: 50%; left: 50%; margin-top: -51px; margin-left: -51px;">
负边距来实现,水平垂直居中。需要知道该元素的具体大小
</div>
</div>
利用绝对定位,配合margin的负值来实现居中。
<div style="width:100px; height:100px; border: 1px dotted blue;position: absolute; top: 50%; left: 50%; margin-top: -51px; margin-left: -51px;">
负边距来实现,水平垂直居中。需要知道该元素的具体大小
</div>
9: 使用absolute绝对定位,配合translate 移动转换,实现水平垂直居中
使用百分比来绝对定位一个元素,并配合使用translate,将元素移动定位居中。
<div class="parent-frame" style="position: relative;">
利用绝对定位,配合translate移动到水平垂直居中。
<div class="child-frame" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
不需知具体大小。支持IE9+及现代浏览器
</div>
</div>
利用绝对定位,配合translate移动到水平垂直居中。
<div style="width:100px; height:100px; border: 1px dotted blue;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
不需知具体大小。支持IE9+及现代浏览器
</div>
10: 使用flex布局,设置其属性justify-content,align-items都为center,实现水平垂直居中
父元素使用flex布局,并定义两个属性值justify-content,align-items都为center,那么就定义为水平垂直居中
justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。
<div class="parent-frame" style="display: flex; justify-content: center; align-items: center">
<div class="child-frame">使用flex布局,justify-content属性定义了项目在主轴上的对齐方式。</div>
<div class="child-frame">
align-items属性定义项目在交叉轴上如何对齐。 两个属性都居中,则水平、垂直居中对齐
</div>
</div>
使用flex布局,justify-content属性定义了项目在主轴上的对齐方式。
11: 利用flex布局,配合margin:auto使用,实现水平垂直居中。
父元素使用flex布局,子元素使用margin: auto
<div class="parent-frame" style="display: flex;">
<div style=" margin: auto;">父元素使用flex布局,子元素配合margin:auto使用</div>
</div>
<div style=" margin: auto;">父元素使用flex布局,子元素配合margin:auto使用</div>
[完]
html中div使用CSS实现水平/垂直居中的多种方式的更多相关文章
- CSS制作水平垂直居中对齐 多种方式各有千秋
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...
- css:元素水平垂直居中的多种方式
CSS元素(文本.图片)水平垂直居中方法 1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:ce ...
- CSS实现水平垂直居中的数种方法整合
CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS制作水平垂直居中对齐
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...
- CSS实现水平垂直居中的1010种方式
转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...
- 你知道CSS实现水平垂直居中的第10种方式吗?
你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...
- css实现水平 垂直居中
css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- CSS如何水平垂直居中?
CSS如何水平垂直居中? 1.CSS如何实现水平居中? margin: 0 auto 2.CSS如何实现水平垂直居中? 首先设置一个div元素,设置背景颜色以便看出变化.代码如下: <!DOCT ...
随机推荐
- 小白月赛13 B小A的回文串 (马拉车算法求最长回文子串)
链接:https://ac.nowcoder.com/acm/contest/549/B来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 262144K,其他语言52428 ...
- 关于vue-router 中参数传递的那些坑(params,query)
1.query方式传参和接受参数 传参 this.$router.push({ path:'/xxx' query:{ idname:id } })接收的方式:this.$route.query.id ...
- The 16th Zhejiang Provincial Collegiate Programming Contest Sponsored E.Sequence in the Pocket(思维题)
传送门 题意: 给出一个序列,你可以将任意一个数移到最前面: 求最少需要移动多少次,可以是此序列变成非递减序列: 思路: 定义 (ai,aj) 为逆序对 ( i < j , ai > aj ...
- ansible迭代/迭代嵌套/同步异步/特殊topic说明
tasks直接举例说明: ---- host: docker remote_user: root gather_facts: yes serial: 3 #表示同一时间控制主机数量(值可以是数值 ...
- servlet三大作用域对象
1 req 请求对象 共享的数据 : 请求共享 特点: 同一次请求中 共享数据可以获取 (请求一旦结束 请求共享清除站)(请求转发能共享 重定向不行) 代码: req.setAttribute(&qu ...
- sql0001
001. https://blog.csdn.net/qinshi965273101/article/details/81907658 002. https://blog.csdn.net/ ...
- D. Vanya and Treasure Codeforces Round #355 (Div. 2)
http://codeforces.com/contest/677/problem/D 建颗新树,节点元素包含r.c.dis,第i层包含拥有编号为i的钥匙的所有节点.用i-1层更新i层,逐层更新到底层 ...
- Linux 默认日志类型
nginx 默认日志类型有两个 access.log http 记录访问日志. error.log server 操作记录日志
- vue.js学习系列-第一篇
VUE系列一 简介 vue是一个兴起的前端js库,是一个精简的MVVM.从技术角度讲,Vue.js专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Mode ...
- flask学习(一)
特点: 短小精悍,可扩展性强 依赖wsgi:werkzurg werkzurg示例: from werkzeug.wrappers import Request, Response from werk ...