方法一：

<!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浮动元素的水平居中的更多相关文章

  1. 用CSS 实现 浮动元素的 水平居中

    问题描述: 基本的html结构: <div> <!-- <span>1</span> <span>2</span> <span& ...

  2. HTML。CSS浮动元素详解

    浮动定位是指 1.1将元素排除在普通流之外,即元素将脱离标准文档流 1.2元素将不在页面占用空间 1.3将浮动元素放置在包含框的左边或者右边 1.4浮动元素依旧位于包含框之内 2. 浮动的框可以向左或 ...

  3. css 浮动元素居中

    方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  4. 用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中

    一.水平居中 (1)行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:   .parent { text-align:center ...

  5. 【转】css浮动元素的知识

    原文: http://www.cnblogs.com/xuyao100/p/8940958.html ------------------------------------------------- ...

  6. 纯CSS实现元素垂直水平居中-非固定宽度

    这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现 ...

  7. css浮动的元素居中

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. css浮动

    一.浮动介绍 历史: 浮动属性产生之初是为了实现“文字环绕”的效果,让文字环绕图片在网页实现类似word中“图文混排”. 定位方式: 浮动让元素脱离正常流,向父容器的左边或右边移动直到碰到包含容器的边 ...

  9. css 使元素居中

    css使元素水平居中 1.对于行内元素的水平居中 给父元素设置text-align:center <div style="text-align:center;">居中显 ...

随机推荐

  1. 《Linear Algebra and Its Applications》-chaper5-特征值与特征向量-基本概念

    基于之前章节的铺垫,我们这里能够很容易的引出特征向量和特征值的概念. 首先我们知道n x n矩阵的A和n维向量v的乘积会得到一个n维的向量,那么现在我们发现,经过计算u=Av,得到的向量u是和v共线的 ...

  2. poj 1050 To the Max (简单dp)

    题目链接:http://poj.org/problem?id=1050 #include<cstdio> #include<cstring> #include<iostr ...

  3. c++截取屏幕图片并保存(函数代码实现)

    <strong> //获取桌面窗体的CDC CDC *pdeskdc = GetDesktopWindow()->GetDC(); CRect re; //获取窗体的大小 GetDe ...

  4. C# 二进制替换第一弹 byte 数组替换

    在做通讯相关的数据操作时常常须要用到 byte[]   byte 数组替换操作.比方协义转换相关的 如今提供了几种替换的方法 /// <summary> /// 二进制数据 操作 /// ...

  5. SSL 错误

    javax.net.ssl.SSLException: Unrecognized SSL message, plaintext connection?    at com.sun.net.ssl.in ...

  6. iOS-UICollectionView自定义布局

    UICollectionView自定义布局 转载: http://answerhuang.duapp.com/index.php/2013/11/20/custom_collection_view_l ...

  7. NSNotificationCenter消息机制的介绍

    转载自http://www.cnblogs.com/pengyingh/articles/2367374.html NSNotificationCenter的作用是专门提供程序中不同类之间的消息通讯而 ...

  8. [转] 怎样在Ubuntu 14.04中搭建gitolite git服务器

    相比gitosis,gitolite的功能更为强大,支持对权限的细分控制,学习一下在最新版 的ubuntu 14.04 LTS中搭建gitolite服务器是非常有必要的,嘿嘿,一会属于我们自己的Git ...

  9. Java序列化之Serializable

    Java的序列化流程如下: Java的反序列化流程如下: 注意:并不是所有类都需要进行序列化,主要原因有两个 1)安全问题.Java中有的类属于敏感类,此类的对象数据不便对外公开,而序列化的对象数据很 ...

  10. LINQ高级编程 笔记

    相关资料:http://www.cnblogs.com/lifepoem/archive/2011/12/16/2288017.html 1.什么是LINQ 语言集成查询是一系列标准查询操作符的集合, ...