俊小赞
俊小赞

元素水平垂直居中的六种方式

文章目录

  • 前言
  • 代码预设
  • 一、绝对定位 + transform
  • 二、绝对定位 + margin
    • 1.不用子盒子的宽高
    • 2.需要子盒子的宽高
  • 三、table-cell 属性
  • 四、flex 布局
  • 五、calc() 函数
  • 总结

前言

让元素同时实现水平垂直，是我们前端开发所经常遇到的，本文将介绍六种常见的方式，以便你的参考供用。

代码预设

下面将会介绍到的六种方法均是使用了这里的 HTML 结构和 css 主体样式。 

<style>
  body {
    margin: 0;
    padding: 0;
  }
  .parents {
    width: 100vw;
    height: 100vh;
  }
  .children {
    width: 300px;
    height: 300px;
    background-color: #2980b9;
  }
style>


<body>
  <div class="parents">
    <div class="children">div>
  div>
body>

一、绝对定位 + transform

通过设置父盒子相对定位，子盒子绝对定位并 top 和 left 距离50%，实现了子盒子左上角点居中，再通过 transform: translate(-50%, -50%); 属性来实现子盒子的中心点居中。

注意： 需要添加浏览器前缀进行兼容。

  .parents {
    position: relative;
  }
  .children {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }

二、绝对定位 + margin

1.不用子盒子的宽高

通过设置父盒子相对定位，子盒子绝对定位，top、right、bottom、left 均为0，再通过 margin: auto; 属性来实现子盒子的水平垂直居中。 
  .parents {
    position: relative;
  }
  .children {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }

2.需要子盒子的宽高

通过设置父盒子相对定位，子盒子绝对定位并 top 和 left 距离50%，实现了子盒子右上角居中，然后利用 margin-top 和 margin-left 属性等于盒子的负宽高，来实现子盒子的中心点居中。

注意： 需要知道子盒子的宽度和高度。

  .parents {
    position: relative;
  }
  .children {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -300px;
  }

三、table-cell 属性

通过设置子盒子为 display: table-cell; 显示类型 ，并分别通过 text-align: center; 和 vertical-align: middle; 实现了子盒子内的文本水平垂直居中。

注意： 水平垂直居中的是盒子中的文本段落。

  .children {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }

四、flex 布局

通过设置父盒子为 display: display; 显示类型 ，并分别通过 justify-content: center; 和 align-items: center; 实现父盒子中的主轴、交叉轴居中，从而让子盒子水平垂直居中。

注意： 需要添加浏览器前缀进行兼容。

  .parents {
    display: flex;
    -webkit-display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
  }

五、calc() 函数

calc() 函数是 css 中用于动态计算长度值，运算符 ”-“ 前后都需要保留一个空格。

注意： 需要添加浏览器前缀进行兼容。

  .parents {
    position: relative;
  }
  .children {
    position: absolute;
    top: calc((100vh - 300px) / 2);
    top: -webkit-calc((100vh - 300px) / 2);
    left: calc((100vw - 300px) / 2);
    left: -webkit-calc((100vw - 300px) / 2);
  }

总结

以上就是今天要讲的内容，本文介绍了六种让元素水平垂直居中的方法，而我个人常用的是绝对定位 + transform 方式，希望可以通过练习，在不同的情景之下使用最优的居中方式。

你可能感兴趣的:(#,Css,css)

  • 【CSS】文本超过行数显示“展开”、“收起” 扶我起来还能学_ css前端
    使用css样式控制文本超过行数显示“展开”、“收起”css代码如下：.container{width:800px;position:relative;padding-bottom:20px;}.content{overflow:hidden;line-height:1;/*最多展示几行就(n*line-height)em，*/height:3em;background:yellow;}.more{
  • 前端面试的话术集锦第 25 篇博文——CSS面试题上 互联网全栈开发实战 面试专栏-前端后端面试前端面试css跳槽职场和发展职场发展求职招聘
    这是记录前端面试的话术集锦第二十五篇博文——CSS面试题上，我会不断更新该博文。❗❗❗1.介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度(content)+border+padding+margin低版本IE盒子模型：宽度=内容宽度(content+border+padding)+margin2.box-sizing属性用来控制元素的盒子模型的解
  • Java程序设计（二十七）：基于SSM框架的OA办公自动化管理平台的设计与实现 人工智能_SYBH 2025年java程序设计java数据挖掘开发语言vue.js后端人工智能springboot
    1.项目概述办公自动化（OA，OfficeAutomation）管理平台是企业实现内部管理信息化的重要工具。本文提出并实现了一个基于Java的OA办公自动化管理平台。该平台基于SSM架构（Spring+SpringMVC+MyBatis），数据库采用MySQL，并通过HTML、CSS、JavaScript等技术实现用户界面。1.1平台功能简介平台提供了管理员、普通用户和部门三类角色，分别具有不同的
  • 从零开始学前端（HTML篇）：9、嵌入另一个页面的iframe元素
    iframe元素通常用于在页面中嵌入另一个页面可以理解为在自己的页面里弄出一个区域，里面放置另一个页面iframe是可替换元素可替换元素：是指会被替换的元素。例如图片元素img等，书写img时没有在里门添加内容，而img元素把加载出来的图片作为内容。通常是行盒通常显示的内容取决于元素的属性css不能完成控制其中的样式具有行块盒的特点
  • 深入解析：v0、Cursor、Manus等AI编程助手的系统提示词、工具与模型 张道宁 人工智能
    引言在当今快速发展的AI编程领域，涌现出了许多强大的AI编程助手工具，如v0、Cursor、Manus、Same.dev、Lovable、Devin和ReplitAgent等。这些工具通过智能化的代码生成、补全和优化，正在彻底改变开发者的工作流程。v0：Vercel的AIUI生成器系统提示词设计v0的系统提示词专注于将自然语言描述转换为可用的UI代码（主要是React和TailwindCSS）。其
  • js实现百度地图的自定义marker与css3动画的交互 沈大大520 css3动画扩展自定义百度地图makerjscss3javascript前端html5
    使用过百度地图，业务需求需要对某些特定标记物进行高亮和动画标记，因此采用css3对百度地图的marker组件进行动态效果的调试，一：调用百度地图的apiDocument.map{width:100%;height:100%;background:#d5e6f5;position:absolute;float:left;}二：初始化百度地图创建实例varmap=newBMapGL.Map("map"
  • Qt 图形视图框架4-动画、碰撞检测和图形项组 Zy100Papa Qtc++开发实战qt开发语言
    1.动画1.1.使用QObject包装器1.2.属性动画（QPropertyAnimation）1.3.定时器动画（QTimer）1.4.场景推进动画（QGraphicsScene::advance）2.碰撞检测1.动画在Qt图形视图框架中，实现动画效果有多种常用方法，下面介绍几种主要方式：以下是在Qt5.15.5(MinGW环境)中实现图形视图框架动画的常用方法，代码已亲测可正常运行：1.1.使
  • rk3566开发之rknn npu 部署 三十度角阳光的问候 rknnnpurk3566目标检测
    目录NPU使用RKNN模型非RKNN模型RKNN-Toolkit2工具RKNNNPU测试代码如下main.ccssd.cc调用ssd模型进行目标检测测试ssd.hqt中调用rknnnpu接口NPU使用RK3566内置NPU模块。使用该NPU需要下载RKNNSDK，RKNNSDK为带有NPU的RK3566/RK3568芯片平台提供编程接口，能够帮助用户部署使用RKNN-Toolkit2导出的RKNN
  • 实现顶部固定与平滑滑动二级菜单的网页导航设计
    本文还有配套的精品资源，点击获取简介：现代网页设计中，高效的导航菜单对用户体验至关重要。本设计涵盖固定在顶部的导航栏和二级菜单项的平滑滑动效果。通过CSS实现导航栏的固定定位，而JavaScript则负责二级菜单的平滑过渡动画。包含的文件如HTML结构、JavaScript交互逻辑、CSS样式和可能的图像资源，共同构建了这种流行的导航菜单布局。1.顶部固定、二级栏目之间相互滑动的导航菜单在现代网页
  • 爬虫-数据解析 打酱油的； python自动化+爬虫爬虫
    1.解析概述特性re(正则表达式)bs4(BeautifulSoup)xpath(lxml)pyquery本质文本模式匹配HTML/XML解析器(DOM树操作)XML路径语言(节点导航)jQuery式CSS选择器(封装lxml)学习曲线陡峭中等中等简单(熟悉jQuery/CSS)灵活性极高(处理任意文本)高(容错好，DOM操作)高(路径、轴、谓词)高(jQuery语法)可读性差(模式复杂时难懂)好
  • 爬虫-正则表达式 打酱油的； python自动化+爬虫爬虫python
    在线正则表达式测试OSCHINA.NET在线工具,ostools为开发设计人员提供在线工具，提供jsbin在线CSS、JS调试，在线JavaAPI文档,在线PHPAPI文档,在线Node.jsAPI文档,LessCSS编译器，MarkDown编译器等其他在线工具https://tool.oschina.net/regex/
  • UmiJs+react-web3连接Metamask钱包
    本人是步入Web3两个月的小菜鸟，经历了一个月react的后台项目开发，此文章适合刚进入区块链行业的前端同学使用(掌握html、js、css)，还请大佬们轻点！！需求：添加Metamask插件实现点击按钮->链接钱包，并在刷新时自动链接。实现点击按钮->添加Chain节点。实现点击按钮->切换Ethereum/Rinkeby节点，切换时页面将刷新。实现点击按钮->获取账户余额。实现点击按钮->获取
  • Html+Css+JavaScript+Vue+Axios入门 chen_ever javascript前端html
    一.HTMLHTML（HyperTextMarkupLanguage）是构建网页的基础语言，用于定义网页的结构和内容。以下介绍HTML的基本概念和用法。页面标题这是一级标题这是一个段落。声明文档类型为HTML5。标签是文档的根元素。包含元信息，如标题和CSS链接。包含可见的页面内容。常用HTML标签到：标题标签，数字越小级别越高。：段落标签。链接文本：超链接标签。：图像标签。和：无序列表。和：有序
  • 深入剖析 CSS 属性计算全流程：从层叠冲突到实际渲染值
    CSS看似简单，但浏览器内部处理一个CSS属性值却经历多步变换——从级联冲突、继承、单位转换到布局阶段，最终生成屏幕呈现的具体像素。这一过程对复杂布局、响应式设计、性能调优等尤为关键。本文从规范和实践层面详解每个阶段，帮你写出更可靠、有效率的样式。一、CSS的四步值变换模型浏览器对每条CSS属性遵循如下清晰流程（按CSS2/CSS4定义）：级联值（Cascaded）：整合多个来源（用户、作者、UA
  • CSS基础知识总结复习 天山小雏菊 知识总结复习csscss3前端
    一、CSS定义CSS是用来定义页面元素的样式设置字体与颜色设置位置和大小添加动画效果二、CSS基本规则的结构h1{/*选择器h1(给页面所有的h1定义样式)*/color:white;/*属性color:属性值white*/font-size:14px;/*属性:属性值就是一个声明*/}三、在页面中使用CSS的方法外链嵌入p{margin:2px;}内联hello四、选择器选择元素的方式按照标签名
  • CSS知识复习2 Savior｀L 前端css前端
    文章目录盒子模型CSS长度单位元素的显示模式修改元素的显示模式盒子模型的组成关于默认高度盒子内边距（padding）盒子边框（border）盒子外边距（margin）注意事项margin塌陷margin合并处理内容溢出隐藏元素方式样式继承默认样式布局小技巧浮动浮动特点浮动影响以及解决方法浮动相关属性定位相对定位绝对定位固定定位粘性定位定位层级布局版心常用布局名词重置默认样式盒子模型CSS长度单位p
  • Redis中常见的基础和高级数据结构
    Redis数据类型eg：大写代表属于redis的关键字，小写代表可填值String定义：存储字节序列（二进制安全的字符串），包括文本、序列化对象和二进制数组，并允许实现计数器和bit操作。作为Redis中其他数据类型的存储单元，如：List、Set、Hashes。命令：命令|文档—Commands|DocsSETkeyvalue：设置键值对命令参数：nx：如果键已存在则失败，可以实现简易的不可重入
  • 原生cesium 实现 多图例展示+点聚合(base64图标)
    个人简介：某大型测绘遥感企业资深Webgis开发工程师，软件设计师(中级)、CSDN优质创作者作者：柳晓黑胡椒❣️专栏：cesium实践(原生)若有帮助，还请关注➕点赞➕收藏，不行的话我再努努力需求背景解决思路解决效果index.vue需求背景1.需要展示多个站点图例的图表及闪烁效果2.需要考虑层级高时，多图例的点聚合效果，且点聚合显示需要采用设计的圆形图标解决思路闪烁效果：采用css3的anim
  • 大学生HTML期末大作业——HTML+CSS+JavaScript传统文化 无·糖 Web前端期末大作业html课程设计css大学生前端大作业期末作业
    HTML+CSS+JS【传统文化】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目传统文化精美设计5页含注册登录二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮
  • 【Tailwind CSS】bg-red-50 和 bg-blue-50 的用法详解
    文章目录一、TailwindCSS中的颜色背景类1.背景颜色的命名规则2.bg-red-50和bg-blue-50的颜色特点二、bg-red-50和bg-blue-50的基本用法示例三、bg-red-50和bg-blue-50的设计理念1.bg-red-50的使用场景2.bg-blue-50的使用场景四、实际应用场景解析1.信息提示框的使用2.页面分区的背景色3.使用交替背景色提升阅读性五、配合其
  • 【Tailwind CSS】font-light 和 my-4 的样式详解 Peter-Lu #Tailwindcss前端react.jsjavascripttypescript
    文章目录一、`font-light`与字体粗细的控制1.`font-light`的作用2.`font-weight`的等级划分3.使用示例二、`my-4`与垂直外边距的控制1.`my-4`的作用2.Tailwind的边距控制系统3.使用示例三、`font-light`和`my-4`的实际应用场景1.用于标题和描述文本的排版2.用于卡片组件的内容分隔3.用于导航菜单的轻量提示四、设计风格的提升：使用
  • 移动端turn.js挖坑总结 进击的金城武
    【1】高版本的jquery会导致turning的过程中page溢出半屏。正确版本：【2】可通过css修改翻书的底部颜色及其透明度，默认为transparent。.flipbook.page{background-color:/*底部色*/}【3】在turn.js的源文件2734行通过修改x,y的值可调整peel的大小与角度。flipMethods._showFoldedPage.call(this
  • 豆瓣8.6分神作：这本《JavaScript DOM编程艺术》，凭什么让前端人读了12年仍奉为圭臬？ 阿蒙Armon 前端javascript开发语言
    豆瓣8.6分神作：这本《JavaScriptDOM编程艺术》，凭什么让前端人读了12年仍奉为圭臬？如果你是Web开发者，一定听过这样的困惑：“学了一堆JavaScript语法，却还是写不出流畅的动态交互？”“懂HTML和CSS，可面对DOM操作总觉得隔层纱？”别急，有一本豆瓣8.6分、5星好评占比47.4%的经典，早就为这些问题准备好了答案——它就是《JavaScriptDOM编程艺术（第2版）》
  • 23、探索OOCSS方法：构建模块化和可维护的CSS代码 wood5 前端架构师的必修课：代码测试与文档OOCSSCSS方法论模块化CSS
    探索OOCSS方法：构建模块化和可维护的CSS代码1.OOCSS概述OOCSS（Object-OrientedCSS）是一种编写CSS的方法论&
  • CSS模块化开发 7Maggie_C Web前端CSS
    CSS模块化一、文件结构常见文件结构一个项目的CSS最基本结构通常是下面这样的：-base.css-common.css-pages.css复杂一点的项目可能是这样分：-base.css-header.css-footer.css-sidebar.css-forms.css-icons.css-buttons.css-dropdown.css-modals.css-layout.css-index
  • CSS3 文本效果详解 lly202406 开发语言
    CSS3文本效果详解引言随着Web技术的发展，CSS3为前端设计师和开发者提供了丰富的文本效果选项。这些效果不仅能够增强网页的美观性，还能提升用户体验。本文将详细介绍CSS3中的文本效果，包括文本阴影、文本描边、文本装饰、文本换行、文本大小写等，并探讨如何在实际项目中应用这些效果。文本阴影文本阴影是CSS3中最常见的文本效果之一。它可以为文本添加阴影，使其更加立体，提升视觉效果。基本语法text-
  • 大学生HTML期末大作业——HTML+CSS+JavaScript游戏网站（英雄联盟） 无·糖 Web前端期末大作业html课程设计css美食游戏javascript大作业
    HTML+CSS+JS【游戏网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目游戏网站（英雄联盟）含注册登录13页二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、
  • 前端技术博客汇总文档 长路 ㅤ    文章目录汇总前端技术HTML5CSS3JavaScriptVue.js
    文章目录前言前端技术博客汇总链接基础知识点HTMLCSSJavaScript基础语法ES6语法扩展知识点Ajax&Fetch与跨域请求Canvas模块化WebpackNode.jsvite框架与实战VueVue.jsVue-routerVuexvue-cli(脚手架)微信小程序性能提升开源生态组件使用资料获取前言博主介绍：✌目前全网粉丝4W+，csdn博客专家、Java领域优质创作者，博客之星、阿
  • 2025年社会学与安全科学国际会议 (ICSSS 2025)
    2025年社会学与安全科学国际会议(ICSSS2025)-融合创新，共筑安全大会地点：中国·成都大会信息会议简称：ICSSS2025收录检索：提交EiCompendex,CPCI,CNKI,GoogleScholar等审稿通知：投稿后2-3日内通知（二）会议简介2025年社会学与安全科学国际会议（ICSSS2025）将在中国成都盛大召开。这是一个汇聚全球顶尖学者、研究人员和行业专家的平台，专注于探
  • Web前端工程化
    Web前端工程化前端工程化是指将软件工程的方法和原则应用到前端开发中，以提高开发效率、保证代码质量、便于团队协作和项目维护的一套体系化实践。以下是前端工程化的主要内容和实践：核心组成部分1.模块化开发JavaScript模块化：CommonJS、AMD、ESModuleCSS模块化：CSSModules、CSS-in-JS组件化：Vue/React/Angular组件体系微前端：将大型应用拆分为多
  • Spring的注解积累 yijiesuifeng spring注解
    用注解来向Spring容器注册Bean。   需要在applicationContext.xml中注册： <context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。 如：在base-package指明一个包    <context:component-sc
  • 传感器 百合不是茶 android传感器
    android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件   下面就以重力传感器为例;   1,在onCreate中获得传感器服务   private SensorManager sm;// 获得系统的服务 private Sensor sensor;// 创建传感器实例 @Override protected void
  • [光磁与探测]金吕玉衣的意义 comsci
          这是一个古代人的秘密:现在告诉大家       信不信由你们:       穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星       这就是为什么古代
  • 精简的反序打印某个数 沐刃青蛟 打印
    以前看到一些让求反序打印某个数的程序。 比如：输入123，输出321。   记得以前是告诉你是几位数的，当时就抓耳挠腮，完全没有思路。   似乎最后是用到%和/方法解决的。   而今突然想到一个简短的方法，就可以实现任意位数的反序打印（但是如果是首位数或者尾位数为0时就没有打印出来了）   代码如下： long num, num1=0;
  • PHP：6种方法获取文件的扩展名 IT独行者 PHP扩展名
      PHP：6种方法获取文件的扩展名   1、字符串查找和截取的方法   1 $extension = substr ( strrchr ( $file ,  '.' ), 1); 2、字符串查找和截取的方法二   1 $extension = substr
  • 面试111 文强chu 面试
    1事务隔离级别有那些 ，事务特性是什么（问到一次） 2 spring aop 如何管理事务的，如何实现的。动态代理如何实现，jdk怎么实现动态代理的，ioc是怎么实现的，spring是单例还是多例，有那些初始化bean的方式，各有什么区别（经常问） 3 struts默认提供了那些拦截器 （一次） 4 过滤器和拦截器的区别 （频率也挺高） 5 final，finally final
  • XML的四种解析方式 小桔子 domjdomdom4jsax
    在平时工作中，难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案，哪个最适合我们呢？在这篇文章中，我对这四种主流方案做一个不完全评测，仅仅针对遍历 XML 这块来测试，因为遍历 XML 是工作中使用最多的（至少我认为）。 　　预 备 　　测试环境： 　　AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server
  • wordpress中常见的操作 aichenglong 中文注册wordpress移除菜单
    1 wordpress中使用中文名注册解决办法   1)使用插件   2)修改wp源代码      进入到wp-include/formatting.php文件中找到       function sanitize_user( $username, $strict = false
  • 小飞飞学管理-1 alafqq 管理
    项目管理的下午题，其实就在提出问题（挑刺），分析问题，解决问题。 今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。 结合我自己经历写下心得 对于公司选拔和培养项目经理的制度有什么毛病呢？ 1，公司考察，选拔项目经理，只关注技术能力，而很少或没有关注管理方面的经验，能力。 2，公司对项目经理缺乏必要的项目管理知识和技能方面的培训。 3，公司对项目经理的工作缺乏进行指
  • IO输入输出部分探讨 百合不是茶 IO
     //文件处理  在处理文件输入输出时要引入java.IO这个包； /* 1，运用File类对文件目录和属性进行操作 2，理解流，理解输入输出流的概念 3，使用字节/符流对文件进行读/写操作 4，了解标准的I/O 5，了解对象序列化 */   //1，运用File类对文件目录和属性进行操作   //在工程中线创建一个text.txt
  • getElementById的用法 bijian1013 element
            getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。        返回具有指定ID属性值的第一个对象的一个引用。        语法： &n
  • 励志经典语录 bijian1013 励志人生
    经典语录1:   哈佛有一个著名的理论：人的差别在于业余时间，而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论，你会发现，你的人生正在发生改变，坚持数年之后，成功会向你招手。不要每天抱着QQ/MSN/游戏/电影/肥皂剧……奋斗到12点都舍不得休息，看就看一些励志的影视或者文章，不要当作消遣；学会思考人生，学会感悟人生
  • [MongoDB学习笔记三]MongoDB分片 bit1129 mongodb
    MongoDB的副本集(Replica Set)一方面解决了数据的备份和数据的可靠性问题，另一方面也提升了数据的读写性能。MongoDB分片(Sharding)则解决了数据的扩容问题，MongoDB作为云计算时代的分布式数据库，大容量数据存储，高效并发的数据存取，自动容错等是MongoDB的关键指标。 本篇介绍MongoDB的切片(Sharding)   1.何时需要分片 &nbs
  • 【Spark八十三】BlockManager在Spark中的使用场景 bit1129 manager
    1. Broadcast变量的存储，在HttpBroadcast类中可以知道 2. RDD通过CacheManager存储RDD中的数据，CacheManager也是通过BlockManager进行存储的 3. ShuffleMapTask得到的结果数据，是通过FileShuffleBlockManager进行管理的，而FileShuffleBlockManager最终也是使用BlockMan
  • yum方式部署zabbix ronin47 yum方式部署zabbix
    安装网络yum库#rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 通过yum装mysql和zabbix调用的插件还有agent代理#yum install zabbix-server-mysql zabbix-web-mysql mysql-
  • Hibernate4和MySQL5.5自动创建表失败问题解决方法 byalias J2EEHibernate4
    今天初学Hibernate4，了解了使用Hibernate的过程。大体分为4个步骤： ①创建hibernate.cfg.xml文件 ②创建持久化对象 ③创建*.hbm.xml映射文件 ④编写hibernate相应代码 在第四步中，进行了单元测试，测试预期结果是hibernate自动帮助在数据库中创建数据表，结果JUnit单元测试没有问题，在控制台打印了创建数据表的SQL语句，但在数据库中
  • Netty源码学习-FrameDecoder bylijinnan javanetty
    Netty 3.x的user guide里FrameDecoder的例子，有几个疑问： 1.文档说：FrameDecoder calls decode method with an internally maintained cumulative buffer whenever new data is received. 为什么每次有新数据到达时，都会调用decode方法？ 2.Dec
  • SQL行列转换方法 chicony 行列转换
    create table tb(终端名称 varchar(10) , CEI分值 varchar(10) , 终端数量 int) insert into tb values('三星' , '0-5' , 74) insert into tb values('三星' , '10-15' , 83) insert into tb values('苹果' , '0-5' , 93)
  • 中文编码测试 ctrain 编码
    循环打印转换编码 String[] codes = { "iso-8859-1", "utf-8", "gbk", "unicode" }; for (int i = 0; i < codes.length; i++) { for (int j
  • hive 客户端查询报堆内存溢出解决方法 daizj hive堆内存溢出
    hive> select * from t_test where ds=20150323 limit 2; OK Exception in thread "main" java.lang.OutOfMemoryError: Java heap space   问题原因： hive堆内存默认为256M   这个问题的解决方法为： 修改/us
  • 人有多大懒，才有多大闲 (评论『卓有成效的程序员』) dcj3sjt126com 程序员
      卓有成效的程序员给我的震撼很大，程序员作为特殊的群体，有的人可以这么懒，  懒到事情都交给机器去做 ，而有的人又可以那么勤奋，每天都孜孜不倦得做着重复单调的工作。   在看这本书之前，我属于勤奋的人，而看完这本书以后，我要努力变成懒惰的人。 不要在去庞大的开始菜单里面一项一项搜索自己的应用程序，也不要在自己的桌面上放置眼花缭乱的快捷图标
  • Eclipse简单有用的配置 dcj3sjt126com eclipse
    1、显示行号  Window -- Prefences -- General -- Editors -- Text Editors -- show line numbers   2、代码提示字符 Window ->Perferences，并依次展开 Java -> Editor -> Content Assist，最下面一栏 auto-Activation
  • 在tomcat上面安装solr4.8.0全过程 eksliang Solrsolr4.0后的版本安装solr4.8.0安装
    转载请出自出处： http://eksliang.iteye.com/blog/2096478       首先solr是一个基于java的web的应用，所以安装solr之前必须先安装JDK和tomcat，我这里就先省略安装tomcat和jdk了         第一步：当然是下载去官网上下载最新的solr版本，下载地址
  • Android APP通用型拒绝服务、漏洞分析报告 gg163 漏洞androidAPP分析
    点评：记得曾经有段时间很多SRC平台被刷了大量APP本地拒绝服务漏洞，移动安全团队爱内测（ineice.com）发现了一个安卓客户端的通用型拒绝服务漏洞，来看看他们的详细分析吧。  0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时，发现了一处通用的本地拒绝服务漏洞。该通用型本地拒绝服务可以造成大面积的app拒绝服务。  针对序列化对象而出现的拒绝服务主要
  • HoverTree项目已经实现分层 hvt 编程.netWebC#ASP.ENT
    HoverTree项目已经初步实现分层，源代码已经上传到 http://hovertree.codeplex.com请到SOURCE CODE查看。在本地用SQL Server 2008 数据库测试成功。数据库和表请参考：http://keleyi.com/a/bjae/ue6stb42.htmHoverTree是一个ASP.NET 开源项目，希望对你学习ASP.NET或者C#语言有帮助，如果你对
  • Google Maps API v3: Remove Markers 移除标记 天梯梦 google maps api
    Simply do the following:   I. Declare a global variable: var markersArray = [];   II. Define a function: function clearOverlays() { for (var i = 0; i < markersArray.length; i++ )
  • jQuery选择器总结 lq38366 jquery选择器
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
  • 基础数据结构和算法六：Quick sort sunwinner AlgorithmQuicksort
    Quick sort is probably used more widely than any other. It is popular because it is not difficult to implement, works well for a variety of different kinds of input data, and is substantially faster t
  • 如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作 刘星宇 htmlWeb
    今天在写一个flash广告代码的时候，因为flash自带的链接，容易被当成弹出广告，所以做了一个div层放到flash上面，这样链接都是a触发的不会被拦截，但发现flash一直处于div层上面，原来flash需要加个参数才可以。 让flash置于DIV层之下的方法，让flash不挡住飘浮层或下拉菜单，让Flash不档住浮动对象或层的关键参数：wmode=opaque。 方法如下：
  • Mybatis实用Mapper SQL汇总示例 wdmcygah sqlmysqlmybatis实用
    Mybatis作为一个非常好用的持久层框架，相关资料真的是少得可怜，所幸的是官方文档还算详细。本博文主要列举一些个人感觉比较常用的场景及相应的Mapper SQL写法，希望能够对大家有所帮助。 不少持久层框架对动态SQL的支持不足，在SQL需要动态拼接时非常苦恼，而Mybatis很好地解决了这个问题，算是框架的一大亮点。对于常见的场景，例如：批量插入/更新/删除，模糊查询，多条件查询，联表查询，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他