方法一：
<!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 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法，下面先给大家分享一下三种方法，希望能帮助...
`可以使容器内的子元素水平和垂直居中。 - 使用CSS Grid，设置`grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));`和`place-items: center;`可以实现类似的效果。 - 传统方法：设置`position:...
`来实现水平居中。然而，这种方法不适用于垂直居中，尤其是对于设置了浮动的元素。 假设我们有以下场景：在一个固定高度（例如300px）的`div`中，包含一个浮动的按钮元素（`button`），我们希望这个按钮能在其父...
/* 子元素水平居中 */ } ``` 5. **Grid布局**： Grid布局则适用于二维布局。通过`place-items: center`，可以同时实现行和列的居中。 ```css .container { display: grid; place-items: center; /* 子元素...
`来实现水平居中。例如，如果页面宽度为700px，对应的CSS样式可以写为： ```css .weicheng { margin: 0 auto; width: 700px; } ``` 这里的`margin: 0 auto;`意味着水平方向上的外边距自动分配，使得元素在其父...
#### 一、宽度自适应的元素水平居中 在Web开发中，使元素能够根据内容的多少自动调整宽度，并将其水平居中的需求非常常见。本篇文章将详细介绍如何通过CSS实现这一效果。 ##### 1. 宽度自适应元素的选择 - **绝对...
`#container`作为页面的主容器，设置背景色、左对齐、固定宽度、自动水平居中以及相对定位，这为后续的绝对定位提供参考点。 接下来是第一大模块的布局设计。这个模块包含3个子模块。第1个子模块使用背景图像创建大...
本文将详细讲解两种使用CSS居中浮动元素的方法。 **方法一：使用绝对定位** 这种方法通过设置元素的绝对定位实现居中。首先，我们需要一个容器（如div）来包裹浮动元素，并设置容器的宽度和高度，例如500px宽和300...
来使其水平居中。 ```css .webFooter.wrap { width: 1200px; margin-left: auto; margin-right: auto; background: red; overflow: hidden; *position: relative; } ``` 接着，让子容器（class为"tabs"的div...
1. **通过`text-align:center`**：将此样式应用于包含所有内容的容器（如`body`），可以使得容器内的文本和内联元素水平居中。例如： ```css body { text-align: center; } ``` 2. **通过`margin:0 auto`**：...
本文将深入探讨CSS元素的水平居中、垂直居中以及浮动元素的居中策略。 ### 水平居中 对于行内元素，如文本，可以简单地通过设置其父元素的`text-align: center;`来实现水平居中。这种方式适用于行内内容，如文字、...
3. **时间点样式**：通过浮动`<li>`元素并调整它们的位置，使时间点位于时间线上方。可以使用Flexbox进行更灵活的布局。 ```css .timeline li { float: left; width: 50%; position: relative; } .timeline li:...
此方法适用于容器高度已知的情况，通过浮动元素并设置负的 `margin-bottom` 来实现垂直居中。 ```css #floater { float: left; height: 50%; margin-bottom: -120px; } #content { clear: both; height: 240px;...
- **相邻的浮动元素和固定元素**：浮动元素与非浮动元素之间的交互。 - **相邻的两个浮动元素**：它们之间的关系以及可能出现的间距问题。 - **相邻的多个浮动元素**：如何处理多个浮动元素间的布局。 #### 关于ul...
此方法适用于父元素和子元素均未定义具体宽度时，通过设置父元素的text-align属性为center，并使子元素的display属性为inline-block，从而实现水平居中。具体实现时，父元素需要有明确的宽度，而子元素则是浮动的...
设置`margin: 0 auto`会使元素水平居中，但对浮动元素无效，因为它已经脱离了正常的文档流。 2. 创建一个包裹容器：将浮动元素放入一个具有`text-align: center`样式的父级容器中。由于文本元素会根据`text-align`...