方法一：

<!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. php将SQL查询结果赋值给变量

    2012-03-25 12:12 a786013819 | 分类:数据库DB | 浏览1393次 $sql = "select field1 from pre_common_member_p ...

  2. [LeetCode] Distinct Subsequences 解题思路

    Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequence ...

  3. 长沙Uber优步司机奖励政策（1月18日~1月24日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  4. .\Obj\uCOSDemo.axf: Error: L6218E: Undefined symbol LCD_Fast_DrawPoint (refe

    这个问题是 没有定义此函数 解决方法是 定义并声明一下 这个函数!!!

  5. nORA-01000: 超出打开游标的最大数（SDE连接）

    1.运行ArcObjects代码报错: IFeatureCursor pCursor = null; try { pCursor = m_pCatchLayer.m_pFeatureClass.Sea ...

  6. ELK监控系统nginx / mysql慢日志

    ELK监控系统nginx / mysql慢日志 elasticsearch logstash kibana ELK监控系统nginx日志 1.环境准备 centos6.8_64 mini IP:192 ...

  7. MySQL (DCL)

    DCL语句 :数据库系统管理员使用,也就是数据库管理员 root 可以添加用户.删除用户.授予和限制用户权限,这些用户的信息可以在数据库的mysql数据库中查询到 1.查看用户信息     1.用ro ...

  8. 移动开发框架，第【二】弹：Hammer.js 移动设备触摸手势js库

    hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...

  9. Android中fragment_main.xml文件里的组件获取的问题

    package com.dhy.phonedial; import android.app.Activity; import android.app.Fragment; import android. ...

  10. [置顶] 基于视频采集卡驱动的错误修改CX26828

    基于视频采集卡驱动的错误修改CX26828 1. 设置root密码 command:sudo passwd root 2.查看系统状态 输入命令:lsmod root@ubuntu:/home/yu# ...