方法一：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面元素的水平居中</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none; font-size:14px; font-family:Tahoma, Geneva, sans-serif; }
.clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }
.clearfix { zoom:1; }
a{ text-decoration:none;}
h1{ text-align:center; padding:10px; font-size:20px; margin:30px 0;}
/** 包装器，relative */
.wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }
/** relative left 50% */
.page { float:left; position:relative; left:50%; }
/** relative right 50% */
.page li { float:left; position:relative; right:50%; overflow:hidden; margin:0 5px; }
</style>
</head>
<body>
<h1>页面元素的水平居中</h1>
<h2>浮动方式：</h2>
<div class="wrap clearfix">
<ul class="page">
<li> <a href="#">上一页</a> </li>
<li> <a href="#">1</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
<li> <a href="#">4</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
<li> <a href="#">4</a> </li>
<li> <a href="#">5</a> </li>
<li> <a href="#">6</a> </li>
<li> <a href="#">下一页</a> </li>
</ul>
</div>
</body>
</html>
这里主要用到position:relative配合left:50%的技巧，兼容各浏览器，需要注意的是IE7下需要设置overflow:hidden;来解决无法设置子元素宽度的BUG。
方法二：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面元素的水平居中</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none; font-size:14px; }
.clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }
.clearfix { zoom:1; }
a{ text-decoration:none;}
h1{ text-align:center; padding:10px; font-size:20px; margin:30px 0;}
.wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }
.inwrap{ float:left; position:relative; left:50%;}
.page { float:left; position:relative; left:-50%; }
.page li { float:left;margin:0 5px; }
.page li a { display:block; padding:2px 9px; background:white; border:1px solid red; float:left;}
</style>
</head>
<body>
<h1>页面元素的水平居中</h1>
<h2>浮动方式：</h2>
<div class="wrap clearfix">
<div class="inwrap">
<ul class="page">
<li> <a href="#">上一页</a> </li>
<li> <a href="#">1</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
<li> <a href="#">4</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
<li> <a href="#">2</a> </li>
<li> <a href="#">3</a> </li>
<li> <a href="#">4</a> </li>
<li> <a href="#">5</a> </li>
<li> <a href="#">6</a> </li>
<li> <a href="#">下一页</a> </li>
</ul>
</div>
</div>
</body>
</html>
这里也可以多套一层的方式设置left:-50%，更合理，也可以避免一些不必要的IE BUG。举一反三，这种float元素居中的方式其实可以延展应用到很多需要浮动元素又居中的情况。
相关推荐
对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法，下面先给大家分享一下三种方法，希望能帮助...
一、宽度自适应的元素水平居中： 1.宽度自适应的元素可以是：绝对位定、浮动元素、行内元素。而我们通常布局，肯定不会用行内元素，所以会选择，绝对定位或浮动。 2.居中：这里我们应该会想到1/2、50%、一半等...
5.7.5 使用text-align 属性的水平居中 5.7.6 使用margin 属性的水平居中 5.8 浮动属性 5.8.1 浮动属性详解 5.8.2 相邻的浮动元素和固定元素 5.8.3 相邻的两个浮动元素 5.8.4 相邻的多个浮动元素 5.9 关于ul 和li 的...
若为块元素（无浮动），则一般有两种方法可实现对其的水平居中，一为margin:0 auto;二为通过css计算函数calc； 垂直居中 若为行内元素，一般对其父元素用line-height:{height}即可，若为图片元素则需再对该元素使用...
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果...Firefox和IE6兼容的垂直居中 CSS CSS浮动原理 CSS网站元素设计...
主要包含HTML5+CSS3基础知识，各种常用标签的意义及基本用法示例。 ...语义化标签：段落标签，标签自定义文字样式，标题...定宽块状元素水平居中设置； 已知宽高实现盒子水平垂直居中； 不知宽高实现盒子水平垂直居中。
具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。 2、使用 text-align:center 这个没什么好说的，只能对图片，按钮，文字等行内...
css常见单位rpx、px、em、rem、%、vh、vw的区别，垂直居中水平居中，利用css构建三角形（正三角，倒三角，左/右三角），响应式布局的方式，几种，媒体查询原理，flex布局，父相子绝，css常见单位rpx、px、em、rem、%...
5. 当子元素浮动且未知高度时，怎么使父容器适应子元素的高度 5 6. 超链接访问过后hover样式就不出现 5 7.IE6绝对定位元素的1像素间距bug 5 8. LI中内容超过长度后以省略号显示的方法 6 9. UL的padding与margin 6 10...
取值：auto 则内容居中 2、外边距margin 6、背景颜色 1.背景色 属性：background: 取值：颜色 2.背景图片 属性：background-image：url(); 取值：url() 3.背景图像平铺 属性：background-repeat 取值：...
1.怎么让一个不定宽高的 DIV，垂直水平居中 3.浮动与清除浮动3.1 浮动相关知识float属性的取值：left：元素向左浮动 7. CSS 引入的方式有哪
relative，absolute，sticky，Static、box-sizing属性、CSS 盒子模型、BFC块级格式上下文原理场景、元素水平垂直居中、元素隐藏、页面布局：Flex 布局、Rem 布局、百分比布局、浮动和清除浮动。 适用人群：初级开发...
兼容各浏览器JS+CSS水平和垂直无缝图片滚动效果代码 12.漂亮暖色调js+flash平滑过渡大屏图片切换的广告代码 13.实用国外JS内容选项卡DEMO下载 14.推荐通用文字图片JS不间断滚动封装类 代替Marquee 15.站长...
浮动元素的特性五、清除浮动解决方法六、定位1. 边偏移2. 定位模式2.1、静态定位 static2.2、相对定位 relative2.3、绝对定位 absolute2.4、绝对定位垂直水平居中2.5、固定定位 fixed2.6、重叠七、常见布局1. 版心2....
包括以下内容： 代码规范 CSS基础 ...水平居中…浮动 列表元素 清除浮动clear 边框border 边界margin 高度自适应 CSS文本属性 文本的间隔与空白 各种水平和垂直居中1 字体的综合属性 图文混排 ......
8. 元素水平居中问题 3 9. Div的垂直居中问题 3 10. margin加倍的问题 3 11. IE与宽度和高度的问题 3 12. 页面的最小宽度 3 13. DIV浮动IE文本产生3象素的bug 3 14. IE捉迷藏的问题 3 15. float的div闭合;...