CSS居中方案大全

如果您觉得我的文章有用，欢迎点赞和关注，也欢迎光临我的个人博客https://github.com/BokFang
在这里总结一下CSS水平居中、垂直居中的各种方式。应该说非常全了。

总览一下：

水平居中
1、内联元素水平居中：text-align:center
2、定宽的单个块级元素：margin: 0 auto
3、多个块级元素：inline-block
4、多个块级元素：display:flex
5、不定宽的块级元素：display:table
6、position:absolute + margin-left:-50%
7、position:absolute + margin:auto
垂直居中
1、内联元素：line-height = height
2、块级元素：position + margin-top: -(高度的一半)
3、块级元素：position + transform
4、块级元素：position + margin: auto
5、块级元素：display:flex
6、块级元素：inline-block
7、块级元素：calc()
8、块级元素：display: table-cell
9、padding
10、伪元素
11、table布局

一、水平居中

1、内联元素水平居中：text-align:center

用法：在父级元素的样式中添加text-align:center

div

.warpper{
  width:100%;
  height:100px;
  background-color:red;
  text-align:center;
}
.inner{
  width:50px;
  height:50px;
  background-color:blue;
}

效果图：

image.png

可以看到， text-align:center可以让文字水平居中，但无法让子元素水平居中。

2、定宽的单个块级元素：margin: 0 auto

用法：在元素样式添加margin:0 auto，使其margin-left和margin-right平分块级元素那一行剩余的宽度。

.warpper{
  width:100%;
  height:100px;
  background-color:red;
  text-align:center;
}
.inner{
  background-color:blue;
  margin:0 auto;
}

效果图：

image.png

当然如果你的块级元素没有设置width，那么div就会占满一行，也就没有水平居中的说法了。

3、多个块级元素：inline-block

如果由多个块级元素，则可以使用inline-block配合text-align:center，将inline-block写在需要居中的元素样式上,text-align:center写在父级元素上。

.wrapper {
  text-align: center;
  border: 1px solid #ccc;  
  height:100px;
}
.inner {
  width: 50px;
  height: 50px;
  background: red;
  border: 1px solid #ccc;  
  display: inline-block;
}

效果图：

image.png

4、多个块级元素：display:flex

使用flex也可以轻松做到多个块级元素水平居中
用法：在父级元素样式增加display: flex justify-content: center

.wrapper {
  text-align: center;
  border: 1px solid #ccc;  
  height:100px;
    display: flex;
  justify-content: center;
}
.inner {
  width: 50px;
  height: 50px;
  background: red;
  border: 1px solid #ccc;  
}

效果图与第三个一样。
当然，多个块级元素能用的居中方法，在单个块级元素上也同样可以使用。

5、不定宽的块级元素：display:table

使用display:table配合margin:0 auto，可以达到不定宽块级元素居中效果。

      
      水平居中

.wrapper{
  width:100%;
  height:100px;
  background:red;
}
  .inner{
      display:table;
      margin:0 auto;
    background:white;
  }

效果图：

image.png

6、position:absolute + margin-left:-50%

使用绝对定位给元素一个left:50%，然后再加一个margin-lelt:-(宽度的一半)

css
.wrapper{
  width:100%;
  height:100px;
  background:red;
}
.inner{
  width:50px;
  height:50px;
  background:blue;
  position:absolute;
  left:50%;
  margin-left:-25px;
}

效果图：

image.png

不过缺点很明显，就是你知道元素宽度而且得固定不变，所以是比较蠢的一种写法。

7、position:absolute + margin:auto

.wrapper {
    position: relative;
    height: 100px;
  background:red;
}
.inner {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background: blue;
}

效果图：

image.png

在样式加个 top:0;bottom:0;还能做到水平垂直居中。是个不错的用法
效果图：

image.png

二、垂直居中

1、内联元素：line-height = height

.wrapper{
   height: 100px;
   line-height: 100px;
   border: 1px solid red;
}

效果图：

image.png

2、块级元素：position + margin-top: -(高度的一半)

这个方法和水平居中的第6个方法一样，就不多说了。

3、块级元素：position + transform

.wrapper {
    position: relative;
    height: 100px;
    background:red;
}
.inner {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}

效果图：

image.png

4、块级元素：position + margin: auto;

这个和水平居中的第7个方法一样，我也就不多说了。

5、块级元素：display:flex

.wrapper {
    width: 100%;
    height: 100px;
    background:red;
    display: flex;
    align-items: center;
    justify-content: center; 
}
.inner {
    background: blue;
    width:50px;
    height:50px;
}

效果图：

image.png

6、块级元素：inline-block


    inner1
    inner2

.wrapper {
    width: 100px;
    height: 100px;
    background:red;
    position: relative;
}
.inner1, .inner2 {
    display: inline-block;
    vertical-align: middle;
}
.inner1 {
    background: blue;
}
.inner2 {
    height: 100px;
    font-size: 0;
}

效果图：

image.png

7、块级元素：calc()

.wrapper {
   width: 100px;
   height: 100px;
   background:red;
   position: relative;
}
.inner1, .inner2 {
   display: inline-block;
   vertical-align: middle;
}
.inner1 {
   background: blue;
}
.inner2 {
   height: 100px;
   font-size: 0;
}

效果图：

image.png

缺点也比较明显，需要计算。

8、块级元素：display: table-cell

.wrapper {
    width: 100%;
    height: 100px;
    background:red;
    display: table;
}
.inner {
    display: table-cell;
    vertical-align: middle; 
}

效果图：

image.png

9、padding

.wrapper {
    padding: 5% 0;
}
.inner {
    padding: 10% 0;
    background: red;
}

效果图：

image.png

10、伪元素

.wrapper {
    width: 100%;
    height: 100px;
    background:red;
    text-align: center;
}
.inner {
    background: blue;
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
}
.wrapper::before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;            
}

效果图：

image.png

11、table布局

需要在html中加入

标签，比较低效，我就不详写了，想了解的朋友可以Google搜索一下。

如果您觉得我的文章有用，欢迎点赞和关注，也欢迎光临我的个人博客https://github.com/BokFang

你可能感兴趣的:(CSS居中方案大全)

水平垂直居中的几种方法（总结） LJ小番茄 CSS_玄学语言 html javascript 前端 css css3
1.使用flexbox的justify-content和align-items.parent{display:flex;justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/height:100vh;/*需要指定高度*/}2.使用grid的place-items:center.parent{display:grid;place-item
《大清方方案》| 第二话谁佐清欢
和珅究竟说了些什么？竟能令堂堂九五之尊龙颜失色！此处暂且按下不表；单说这位乾隆皇帝，果真不愧是康熙从小带过的，一旦决定了要做的事，便杀伐决断毫不含糊。他当即亲自拟旨，着令和珅为钦差大臣，全权负责处理方方事件，并钦赐尚方宝剑，遇急则三品以下官员可先斩后奏。和珅身负皇上重托，岂敢有半点怠慢，当夜即率领相关人等，马不停蹄杀奔江汉。这一路上，和珅的几位幕僚一直在商讨方方事件的处置方案。有位年轻幕僚建议快刀
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
深入理解 MultiQueryRetriever：提升向量数据库检索效果的强大工具 nseejrukjhad 数据库 python
深入理解MultiQueryRetriever：提升向量数据库检索效果的强大工具引言在人工智能和自然语言处理领域，高效准确的信息检索一直是一个关键挑战。传统的基于距离的向量数据库检索方法虽然广泛应用，但仍存在一些局限性。本文将介绍一种创新的解决方案：MultiQueryRetriever，它通过自动生成多个查询视角来增强检索效果，提高结果的相关性和多样性。MultiQueryRetriever的工
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
CX8903：Ebike自行车仪表电源方案开发,Ebike智能仪表电源芯片诚芯微科技社交电子
CX8903：电动Ebike自行车仪表电源方案开发,Ebike智能仪表电源芯片推荐。电动助力自行车EBIKE凭借其环保、健康、低噪、和便捷等特点，成为了越来越受欢迎的骑行便利交通工具。提供电动Ebike自行车仪表电源方案开发、E-BIKE电动助力自行车仪表供电电源解决方案。CX8903采用100V高压制造工艺（芯片最高耐压可到100V以上），SOP-8L贴片封装，CX8903内置100V/90mΩ
CX8836：小体积大功率升降压方案推荐（附Demo设计指南）诚芯微科技社交电子
CX8836是一颗同步四开关单向升降压控制器，在4.5V-40V宽输入电压范围内稳定工作，持续负载电流10A，能够在输入高于或低于输出电压时稳定调节输出电压，可适用于USBPD快充、车载充电器、HUB、汽车启停系统、工业PC电源等多种升降压应用场合，为大功率TYPE-CPD车载充电器提供最优解决方案。提供CX8836Demo测试、CX8836样品申请及CX8836方案开发技术支持。CX8836同升
ARM驱动学习之基础小知识 JT灬新一 ARM 嵌入式 arm开发学习
ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
Low Power概念介绍-Voltage Area 飞奔的大虎
随着智能手机，以及物联网的普及，芯片功耗的问题最近几年得到了越来越多的重视。为了实现集成电路的低功耗设计目标，我们需要在系统设计阶段就采用低功耗设计的方案。而且，随着设计流程的逐步推进，到了芯片后端设计阶段，降低芯片功耗的方法已经很少了，节省的功耗百分比也不断下降。芯片的功耗主要由静态功耗（staticleakagepower）和动态功耗(dynamicpower)构成。静态功耗主要是指电路处于等
摩托车加装车载手机充电usb方案/雅马哈USB充电方案开发诚芯微科技社交电子
长途骑行需要给手机与行车记录仪等设备供电，那么，加装USB充电器就相继在两轮电动车上应用起来了。摩托车加装usb充电方案主要应用于汽车、电动自行车、摩托车、房车、渡轮、游艇等交通工具。提供电动车USB充电器方案/摩托车加装usb充电方案/渡轮加装usb充电方案/游艇加装usb充电方案开发。摩托车加装车载手机充电usb方案、汽车游艇改装四孔面板装双USB车充点烟器5V/4A电动车USB充电器输入4.
OPENAIGC开发者大赛企业组AI黑马奖 | AIGC数智传媒解决方案 RPA中国人工智能 AIGC 传媒
在第二届拯救者杯OPENAIGC开发者大赛中，涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到，我们特意开设了优秀作品报道专栏，旨在展示其独特之处和开发者的精彩故事。无论您是技术专家还是爱好者，希望能带给您不一样的知识和启发。让我们一起探索AIGC的无限可能，见证科技与创意的完美融合！创未来AI应用赛-企业组AI黑马奖作品名称：AIGC数智传媒解决方案参赛团队：深圳市三象智能技术
Xinference如何注册自定义模型玩人工智能的辣条哥人工智能 AI 大模型 Xinference
环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model
2023.5.10 周三早7:38 努力逆流而上
榜样的力量前一段时间追一个《一生一世》的电视剧，脑残剧，但居中的周生辰，稳重。润玉一般的性格，坚持着10年如一日的自律习惯，养成的性格也是这样温文尔雅，虽然是剧中塑造，但我感觉现实中一定是有的，让我觉得人生就是这样的修行，自律不是强迫自己，是形成的习惯，坚持的习惯！结果五一回家，太无聊，看了韩剧的《继承者》让孩子也跟着一起看手机，昨天跑了步，但发现没有很快乐，不知道起的太晚还是怎么着，7点的大街上
网络通信流程记得开心一点啊服务器网络运维
目录♫IP地址♫子网掩码♫MAC地址♫相关设备♫ARP寻址♫网络通信流程♫IP地址我们已经知道IP地址由网络号+主机号组成，根据IP地址的不同可以有5钟划分网络号和主机号的方案：其中，各类地址的表示范围是：分类范围适用网络网络数量主机最大连接数A类0.0.0.0~127.255.255.255大型网络12616777214【(2^24)-2】B类128.0.0.0~191.255.255.255中
react-intl——react国际化使用方案苹果酱0567 面试题汇总与解析 java 开发语言中间件 spring boot 后端
国际化介绍i18n：internationalization国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有k8s(Kubernetes)React-intl是React中最受欢迎的库。使用步骤安装#usenpmnpminstallreact-intl-D#useyarn项目入口文件配置//index.tsximportReactfrom"react";importReactDOMf
06选课支付模块之基于消息队列发送支付通知消息 echo 云清学成在线 java rabbitmq 消息队列支付通知学成在线
消息队列发送支付通知消息需求分析订单服务作为通用服务，在订单支付成功后需要将支付结果异步通知给其他对接的微服务，微服务收到支付结果根据订单的类型去更新自己的业务数据技术方案使用消息队列进行异步通知需要保证消息的可靠性即生产端将消息成功通知到服务端：消息发送到交换机-->由交换机发送到队列-->消费者监听队列，收到消息进行处理，参考文章02-使用Docker安装RabbitMQ-CSDN博客生产者确
【Python搞定车载自动化测试】——Python实现车载以太网DoIP刷写（含Python源码）疯狂的机器人 Python搞定车载自动化 python DoIP UDS ISO 14229 1SO 13400 Bootloader tcp/ip
系列文章目录【Python搞定车载自动化测试】系列文章目录汇总文章目录系列文章目录前言一、环境搭建1.软件环境2.硬件环境二、目录结构三、源码展示1.DoIP诊断基础函数方法2.DoIP诊断业务函数方法3.27服务安全解锁4.DoIP自动化刷写四、测试日志1.测试日志五、完整源码链接前言随着智能电动汽车行业的发展，汽车=智能终端+四个轮子，各家车企都推出了各自的OTA升级方案，本章节主要介绍如何使
详解：如何设计出健壮的秒杀系统？夜空_2cd3
作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
2024春节微信红包封面序列号大全一览帮忙赚赏金
2024微信红包封面序列号哪里领取红包封面领取微信搜索公众号：【艺间封面】千万红包封面等你领取2024微信红包封面免费序列号如何设置微信红包封面？1.打开微信，点击好友选择红包。2.单击红包封面。3.单击“添加红包封面”。4.输入接收序列号。来一波免费的微信红包封面序列号微信红包封面序列号红包封面领取微信搜索公众号：艺间封面千万红包封面等你领取微信红包封面序列号kGnkrbw5a7N微信红包封面序
《转介绍方法论》学习笔记小可乐的妈妈
一、高效转介绍的流程：价值观---执行----方案一）转介绍发生的背景：1、对象：谁向谁转介绍？全员营销，人人参与。①员工的激励政策、客户的转介绍诱因制作客户画像：a信任；支付能力；意愿度；便利度（根据家长具备四个特征的个数分为四类）B性格分类C职业分类D年龄性别②执行：套路，策略，方法，流程2、诱因：为什么要转介绍？认同信任；多方共赢；传递美好；零风险承诺打动人心，超越期待。选择做教育，就是选择
wandb一直上传解决方案行业边缘的摸鱼怪 bug解决方案服务器 linux 服务器
问题描述运行带有wandb的代码时，虽然可以实现及时同步非常方便，但当设置错参数或其他原因不得不使用ctrl+C停止运行时，总会出现wandb一直上传个不停的现象，给在同一终端重新运行新的代码造成困难。解决方案运行以下代码把wandb的进程直接杀死。psaux|grepwandb|grep-vgrep|awk'{print$2}'|xargskill-9参考链接[CLI]:Ctrl+Ctokill
学着不在做孤独的小孩苯妥英钠
梦境中，经常，绝非偶然的，多次，隔着半个月，或者半年的时光，也许更短，总会梦见自己在里面孤独的面对着自己深深觉得恐怖的事情。在梦里我们没有主导权，没有享受一切的权利，只有被迫式的逃离，却发现自己的内心已经强烈的渴望奔向远方，却无可奈何的发现自己的脚步还在原地，此时身后的黑暗越来越接近自己。等我们长大的时候，我们依然在梦中会被迫的控制住，即使我们可能知道，也多么希望我们自己能有很多的方案去摆脱，或者
程序员如何在AI时代保持核心竞争力 nfgo chatgpt 人工智能
程序员如何在AI时代保持核心竞争力随着AIGC（如ChatGPT、MidJourney、Claude等）大语言模型的相继涌现，AI辅助编程工具逐渐普及，程序员的工作方式正在发生深刻的变革。AI不仅能够自动生成代码，还能优化、调试、甚至提出解决方案。这一趋势让许多人担心：AI会不会最终取代部分编程工作？然而，也有人认为AI是提升效率的得力助手。那么，程序员在这个AI崛起的时代该如何应对？是专注某个领
python老是报参数未定义_Python函数默认参数常见问题及解决方案 weixin_39935571 python老是报参数未定义
一、默认参数python为了简化函数的调用，提供了默认参数机制：这样在调用pow函数时，就可以省略最后一个参数不写：在定义有默认参数的函数时，需要注意以下：必选参数必须在前面，默认参数在后；设置何种参数为默认参数？一般来说，将参数值变化小的设置为默认参数。python标准库实践python内建函数：函数签名可以看出，使用print('hellopython')这样的简单调用的打印语句，实际上传入了
程序员架构师主要是做什么_程序员架构师：职责、技能与挑战绿色小猪
免费备考资料（2024年11月软考）：历年试题+视频课合集+电子讲义点击领取>>>免费刷题：2024年11月软考备考刷题点此进入>>>程序员架构师的角色定位在软件开发领域，程序员架构师是一个至关重要的角色。他们不仅需要深入理解业务需求，还要将其转化为技术上的解决方案。程序员架构师是项目中的技术领航者，负责制定和维护软件系统的整体架构，确保系统的可扩展性、可维护性和性能。他们的工作涉及从概念化到实现
使用datepicker和uploadify的冲突解决（IE双击才能打开附件上传对话框） zhanglb12
在开发的过程当中，IE的兼容无疑是我们的一块绊脚石，在我们使用的如期的datepicker插件和使用上传附件的uploadify插件的时候，两者就产生冲突，只要点击过时间的插件，uploadify上传框要双才能打开ie浏览器提示错误Missinginstancedataforthisdatepicker解决方案//if(.browser.msie&&'9.0'===.browser.version
加载资源时报错-ERR_CONNECTION_RESET，需要多次请求才能拿到资源的有效解决方案 Mebius1916 前端开发前端 javascript react.js 前端框架 typescript vue.js
初次加载资源时无法正常加载，需要多次刷新、请求才能拿到资源的有效解决方案前言在使用cloudinary进行图片上传并获取图片链接作为用户头像时发现，图片链接网址初次加载会报错：ERR_CONNECTION_RESET必须刷新几次才能获取到，原因可能是cloudinary没有国内的节点，而我用的是在新加坡的节点，所以会导致初次加载的时候被重定向。而这个错误会直接导致用户头像无法加载，因为在img中此
靠谱的海淘APP大全可以海淘的软件有哪些氧惠评测
96KaiFa为您整理了可以海淘的软件有哪些，分别有海淘、ZOZO日本海淘、海淘铺、美芽海淘、海淘1号海外购、高乐高海淘、海淘美瞳、海淘返利网、海淘拼单、豌豆公主海淘，下面一起来看靠谱的海淘APP大全吧！购物、看电影、点外卖、用氧惠APP！更优惠！氧惠（全网优惠上氧惠）——是与以往完全不同的抖客+淘客app！2023全新模式，我的直推也会放到你下面，送1:1超级补贴(邀请好友自购多少，你就推广得多
java解析APK 3213213333332132 java apk linux 解析APK
解析apk有两种方法 1、结合安卓提供apktool工具，用java执行cmd解析命令获取apk信息 2、利用相关jar包里的集成方法解析apk 这里只给出第二种方法，因为第一种方法在linux服务器下会出现不在控制范围之内的结果。 public class ApkUtil { /** * 日志对象 */ private static Logger
nginx自定义ip访问N种方法 ronin47 nginx 禁止ip访问
　　　因业务需要，禁止一部分内网访问接口，　由于前端架了F5，直接用deny或allow是不行的，这是因为直接获取的前端Ｆ５的地址。　　　所以开始思考有哪些主案可以实现这样的需求，目前可实施的是三种：　　　一：把ip段放在redis里，写一段lua 二：利用geo传递变量，写一段
mysql timestamp类型字段的CURRENT_TIMESTAMP与ON UPDATE CURRENT_TIMESTAMP属性 dcj3sjt126com mysql
timestamp有两个属性，分别是CURRENT_TIMESTAMP 和ON UPDATE CURRENT_TIMESTAMP两种，使用情况分别如下： 1. CURRENT_TIMESTAMP 当要向数据库执行insert操作时，如果有个timestamp字段属性设为 CURRENT_TIMESTAMP，则无论这
struts2+spring+hibernate分页显示 171815164 Hibernate
分页显示一直是web开发中一大烦琐的难题，传统的网页设计只在一个JSP或者ASP页面中书写所有关于数据库操作的代码，那样做分页可能简单一点，但当把网站分层开发后，分页就比较困难了，下面是我做Spring+Hibernate+Struts2项目时设计的分页代码，与大家分享交流。　　1、DAO层接口的设计，在MemberDao接口中定义了如下两个方法： public in
构建自己的Wrapper应用 g21121 rap
我们已经了解Wrapper的目录结构，下面可是正式利用Wrapper来包装我们自己的应用，这里假设Wrapper的安装目录为:/usr/local/wrapper。首先，创建项目应用 &nb
[简单]工作记录_多线程相关 53873039oycg 多线程
最近遇到多线程的问题,原来使用异步请求多个接口(n*3次请求) 方案一使用多线程一次返回数据,最开始是使用5个线程,一个线程顺序请求3个接口,超时终止返回缺点测试发现必须3个接
调试jdk中的源码，查看jdk局部变量程序员是怎么炼成的 jdk 源码
转自：http://www.douban.com/note/211369821/ 学习jdk源码时使用-- 学习java最好的办法就是看jdk源代码，面对浩瀚的jdk（光源码就有40M多，比一个大型网站的源码都多）从何入手呢，要是能单步调试跟进到jdk源码里并且能查看其中的局部变量最好了。可惜的是sun提供的jdk并不能查看运行中的局部变量
Oracle RAC Failover 详解 aijuans oracle
Oracle RAC 同时具备HA(High Availiablity) 和LB(LoadBalance). 而其高可用性的基础就是Failover(故障转移). 它指集群中任何一个节点的故障都不会影响用户的使用，连接到故障节点的用户会被自动转移到健康节点，从用户感受而言，是感觉不到这种切换。 Oracle 10g RAC 的Failover 可以分为3种： 1. Client-Si
form表单提交数据编码方式及tomcat的接受编码方式 antonyup_2006 JavaScript tomcat 浏览器互联网 servlet
原帖地址：http://www.iteye.com/topic/266705 form有2中方法把数据提交给服务器，get和post,分别说下吧。（一）get提交 1.首先说下客户端（浏览器）的form表单用get方法是如何将数据编码后提交给服务器端的吧。对于get方法来说，都是把数据串联在请求的url后面作为参数，如：http://localhost:
JS初学者必知的基础百合不是茶 js函数 js入门基础
JavaScript是网页的交互语言,实现网页的各种效果, JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 HTML 页面增加交互性。许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的
iBatis的分页分析与详解 bijian1013 java ibatis
分页是操作数据库型系统常遇到的问题。分页实现方法很多，但效率的差异就很大了。iBatis是通过什么方式来实现这个分页的了。查看它的实现部分，发现返回的PaginatedList实际上是个接口，实现这个接口的是PaginatedDataList类的对象，查看PaginatedDataList类发现，每次翻页的时候最
精通Oracle10编程SQL(15)使用对象类型 bijian1013 oracle 数据库 plsql
/* *使用对象类型 */ --建立和使用简单对象类型 --对象类型包括对象类型规范和对象类型体两部分。 --建立和使用不包含任何方法的对象类型 CREATE OR REPLACE TYPE person_typ1 as OBJECT( name varchar2(10),gender varchar2(4),birthdate date ); drop type p
【Linux命令二】文本处理命令awk bit1129 linux命令
awk是Linux用来进行文本处理的命令，在日常工作中，广泛应用于日志分析。awk是一门解释型编程语言，包含变量，数组，循环控制结构，条件控制结构等。它的语法采用类C语言的语法。 awk命令用来做什么？ 1.awk适用于具有一定结构的文本行，对其中的列进行提取信息 2.awk可以把当前正在处理的文本行提交给Linux的其它命令处理，然后把直接结构返回给awk 3.awk实际工
JAVA(ssh2框架)+Flex实现权限控制方案分析白糖_ java
目前项目使用的是Struts2+Hibernate+Spring的架构模式，目前已经有一套针对SSH2的权限系统，运行良好。但是项目有了新需求：在目前系统的基础上使用Flex逐步取代JSP，在取代JSP过程中可能存在Flex与JSP并存的情况，所以权限系统需要进行修改。【SSH2权限系统的实现机制】权限控制分为页面和后台两块：不同类型用户的帐号分配的访问权限是不同的，用户使
angular.forEach boyitech AngularJS AngularJS API angular.forEach
angular.forEach 描述: 循环对obj对象的每个元素调用iterator, obj对象可以是一个Object或一个Array. Iterator函数调用方法: iterator(value, key, obj), 其中obj是被迭代对象，key是obj的property key或者是数组的index，value就是相应的值啦. (此函数不能够迭代继承的属性.)
java-谷歌面试题-给定一个排序数组，如何构造一个二叉排序树 bylijinnan 二叉排序树
import java.util.LinkedList; public class CreateBSTfromSortedArray { /** * 题目:给定一个排序数组，如何构造一个二叉排序树 * 递归 */ public static void main(String[] args) { int[] data = { 1, 2, 3, 4,
action执行2次 Chen.H JavaScript jsp XHTML css Webwork
xwork 写道 <action name="userTypeAction" class="com.ekangcount.website.system.view.action.UserTypeAction"> <result name="ssss" type="dispatcher">
[时空与能量]逆转时空需要消耗大量能源 comsci 能源
无论如何,人类始终都想摆脱时间和空间的限制....但是受到质量与能量关系的限制,我们人类在目前和今后很长一段时间内,都无法获得大量廉价的能源来进行时空跨越..... 在进行时空穿梭的实验中,消耗超大规模的能源是必然
oracle的正则表达式(regular expression)详细介绍 daizj oracle 正则表达式
正则表达式是很多编程语言中都有的。可惜oracle8i、oracle9i中一直迟迟不肯加入，好在oracle10g中终于增加了期盼已久的正则表达式功能。你可以在oracle10g中使用正则表达式肆意地匹配你想匹配的任何字符串了。正则表达式中常用到的元数据(metacharacter)如下： ^ 匹配字符串的开头位置。 $ 匹配支付传的结尾位置。 *
报表工具与报表性能的关系 datamachine 报表工具 birt 报表性能润乾报表
在选择报表工具时，性能一直是用户关心的指标，但是，报表工具的性能和整个报表系统的性能有多大关系呢？要回答这个问题，首先要分析一下报表的处理过程包含哪些环节，哪些环节容易出现性能瓶颈，如何优化这些环节。一、报表处理的一般过程分析 1、用户选择报表输入参数后，报表引擎会根据报表模板和输入参数来解析报表，并将数据计算和读取请求以SQL的方式发送给数据库。 2、
初一上学期难记忆单词背诵第一课 dcj3sjt126com word english
what 什么 your 你 name 名字 my 我的 am 是 one 一 two 二 three 三 four 四 five 五 class 班级，课 six 六 seven 七 eight 八 nince 九 ten 十 zero 零 how 怎样 old 老的 eleven 十一 twelve 十二 thirteen
我学过和准备学的各种技术 dcj3sjt126com 技术
语言VB https://msdn.microsoft.com/zh-cn/library/2x7h1hfk.aspxJava http://docs.oracle.com/javase/8/C# https://msdn.microsoft.com/library/vstudioPHP http://php.net/manual/en/Html
struts2中token防止重复提交表单蕃薯耀重复提交表单 struts2中token
struts2中token防止重复提交表单 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月12日 11:52:32 星期日 ht
线性查找二维数组 hao3100590 二维数组
1.算法描述有序（行有序，列有序，且每行从左至右递增，列从上至下递增）二维数组查找，要求复杂度O(n) 2.使用到的相关知识：结构体定义和使用，二维数组传递（http://blog.csdn.net/yzhhmhm/article/details/2045816） 3.使用数组名传递这个的不便之处很明显，一旦确定就是不能设置列值 //使
spring security 3中推荐使用BCrypt算法加密密码 jackyrong Spring Security
spring security 3中推荐使用BCrypt算法加密密码了，以前使用的是md5， Md5PasswordEncoder 和 ShaPasswordEncoder，现在不推荐了，推荐用bcrpt Bcrpt中的salt可以是随机的，比如： int i = 0; while (i < 10) { String password = "1234
学习编程并不难,做到以下几点即可! lampcy java html 编程语言
不论你是想自己设计游戏，还是开发iPhone或安卓手机上的应用，还是仅仅为了娱乐，学习编程语言都是一条必经之路。编程语言种类繁多，用途各异，然而一旦掌握其中之一，其他的也就迎刃而解。作为初学者，你可能要先从Java或HTML开始学，一旦掌握了一门编程语言，你就发挥无穷的想象，开发各种神奇的软件啦。 1、确定目标学习编程语言既充满乐趣，又充满挑战。有些花费多年时间学习一门编程语言的大学生到
架构师之mysql----------------用group+inner join,left join ,right join 查重复数据（替代in) nannan408 right join
1.前言。如题。 2.代码 (1)单表查重复数据,根据a分组 SELECT m.a,m.b, INNER JOIN （select a,b,COUNT(*) AS rank FROM test.`A` A GROUP BY a HAVING rank>1 )k ON m.a=k.a （2）多表查询，使用改为le
jQuery选择器小结 VS 节点查找（附css的一些东西） Everyday都不同 jquery css name选择器追加元素查找节点
最近做前端页面，频繁用到一些jQuery的选择器，所以特意来总结一下：测试页面： <html> <head> <script src="jquery-1.7.2.min.js"></script> <script> /*$(function() { $(documen
关于EXT tntxia ext
ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用 javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 ExtJs最开始基于YUI技术，由开发人员Jack
一个MIT计算机博士对数学的思考 xjnine Math
在过去的一年中，我一直在数学的海洋中游荡，research进展不多，对于数学世界的阅历算是有了一些长进。为什么要深入数学的世界？作为计算机的学生，我没有任何企图要成为一个数学家。我学习数学的目的，是要想爬上巨人的肩膀，希望站在更高的高度，能把我自己研究的东西看得更深广一些。说起来，我在刚来这个学校的时候，并没有预料到我将会有一个深入数学的旅程。我的导师最初希望我去做的题目，是对appe

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他