方法一：

<!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. thinkphp解决表单令牌问题

    控制器中添加 C('TOKEN_ON',false); 然后再$this->display();即可

  2. 关于assert的学习

    编写代码时,总会做出一些假设,断言就是用于在代码中捕捉这些假设, 可以将断言看成是异常处理的一种高级形式. c语言assert宏的定义, #include <assert.h> void ...

  3. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（21）-权限管理系统-跑通整个系统

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(21)-权限管理系统-跑通整个系统 这一节我们来跑通整个系统,验证的流程,通过AOP切入方式,在访问方法之 ...

  4. [Redux] Adding React Router to the Project

    We will learn how to add React Router to a Redux project and make it render our root component. Inst ...

  5. 使用org.apache.jasper.JspC编译jsp文件--转载

    JspC可以通过jspc.setArgs(args);设置所需参数,和使用指令进行编译相同, 使用指令编译范例: java -cp jasper.jar;servlet-api.jar;Fcatali ...

  6. 全面分析 Spring 的编程式事务管理及声明式事务管理--转

    开始之前 关于本教程 本教程将深入讲解 Spring 简单而强大的事务管理功能,包括编程式事务和声明式事务.通过对本教程的学习,您将能够理解 Spring 事务管理的本质,并灵活运用之. 先决条件 本 ...

  7. MySQL——修改root密码的4种方法(以windows为例)

    方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password('新密码'); 例子:my ...

  8. Java基础知识强化之集合框架笔记40：Set集合之HashSet存储自定义对象并遍历

    1. HashSet存储自定义对象并遍历 2. 代码示例: (1)Student类,如下: package cn.itcast_02; /** * @author Administrator * */ ...

  9. clearTimeout(timeoutfunc) 是否有必要执行

    当使用 setTimeout() 方法的时候,是否必须执行 clearTimeout() ? 在 setTimeout() 内的函数执行之前,如果想要阻止执行该方法,是有必要执行 cleartTime ...

  10. 一次优化web项目的经历记录（一）

    一次优化web项目的经历记录 这段时间以来的总结与反思 前言:最近很长一段时间没有更新博客了,忙于一堆子项目的开发,严重拖慢了学习与思考的进程.开水倒满了需要提早放下杯子,晚了就会烫手,这段时间以来, ...