更新：可直接访问 [CSS/CSS3 如何实现元素水平居中] 查看效果，右键查看源代码

-------------------------------------------------分割线---------------------------------------------

先上效果图

图中链接：inline-block元素之间存在空白间距

图中链接：Horizontally Centered Menus with no CSS hacks

实现代码：

<span style="font-family:Microsoft YaHei;font-size:14px;"><span style="font-family:Microsoft YaHei;font-size:14px;"><!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8"/>

	<title>Horizontal</title>

</head>

<body>

<h3>CSS 如何实现元素水平居中</h3>

<!-- margin:auto实现水平居中 -->

<p>1.margin:auto实现水平居中</p>

<p>缺点：必须设置固定宽度</p>

<style type="text/css">

	.margin-auto-parent{width: 300px; height: 300px; background: #60bcd3; }

	.margin-auto-content{width: 200px; height: 200px; margin:0 auto; background: #ff6700;}

</style>

<div class="margin-auto-parent">

	<div class="margin-auto-content"></div>

</div>

<!-- text-align+inline-block实现水平居中 -->

<p>2.text-align+inline-block实现水平居中</p>

<p>缺点：<a href="http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements" target="_blank">inline-block元素之间存在空白间距</a></p>

<style type="text/css">

	.inline-block-parent{width: 300px; height: 300px; background: #60bcd3; text-align: center;}

	.inline-block-content{width: 200px; height: 200px; display: inline-block; background: #ff6700;}

	.inline-block-content span{display: inline-block;text-align: left;}

</style>

<div class="inline-block-parent">

	<div class="inline-block-content">

		<!-- <span>换行后右边会产生空白间距</span> -->

	</div>

</div>

<!-- 通过设置float + text-align + display:inline;实现水平居中 -->

<p>3.通过设置float + text-align + display:inline;实现水平居中</p>

<p>缺点：原理稍复杂，需额外增加一个元素做嵌套</p>

<p>参考：<a href="http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support" target="_blank">Horizontally Centered Menus with no CSS hacks</a></p>

<style type="text/css">

	.float-center-parent{width: 300px; height: 300px; background: #60bcd3; position: relative;}

	.float-center-content-wrap{position: relative;left: 50%; text-align: center;}

	.float-center-content{display: inline; position: relative; right: 50%; background: #ff6700;}

</style>

<div class="float-center-parent">

	<div class="float-center-content-wrap">

		<div class="float-center-content">float...自适应宽度</div>

	</div>

</div>

<!-- 绝对定位实现水平居中 -->

<p>4.绝对定位实现水平居中</p>

<p>缺点：必须设置固定宽度</p>

<style type="text/css">

	.position-absolute-parent{width: 300px; height: 300px; background: #60bcd3; position: relative;}

	.position-absolute-content{width: 200px; height: 200px; position: absolute; left: 50%; margin-left: -100px; background: #ff6700;}

</style>

<div class="position-absolute-parent">

	<div class="position-absolute-content"></div>

</div>

<p>解决之道：结合方法3实现自适应宽度</p>

<style type="text/css">

	.position-float-parent{width: 300px; height: 300px; background: #60bcd3; position: relative;}

	.position-float-content-wrap{position: absolute; left: 50%;}

	.position-float-content{position: relative; right: 50%; float: left; display: inline; background: #ff6700;}

</style>

<div class="position-float-parent">

	<div class="position-float-content-wrap">

		<div class="position-float-content">绝对定位自适应宽度</div>

	</div>

</div>

<h3>CSS3 如何实现元素水平居中</h3>

<!-- flex实现水平居中 -->

<p>5.flex实现水平居中</p>

<p>缺点：兼容性差</p>

<style type="text/css">

	.flex-parent{width: 300px; height: 300px; background: #60bcd3; display: flex; justify-content:center;}

	.flex-content{ background: #ff6700;}

</style>

<div class="flex-parent">

	<div class="flex-content">自适应宽度</div>

</div>

<!-- width:fit-content; + margin:0 auto;实现水平居中 -->

<p>6.width:fit-content; + margin:0 auto;实现水平居中</p>

<p>缺点：兼容性差</p>

<style type="text/css">

	.flex-parent{width: 300px; height: 300px; background: #60bcd3; }

	.flex-content{ background: #ff6700; width: fit-content; margin: 0 auto;}

</style>

<div class="flex-parent">

	<div class="flex-content">fit-content自适应宽度</div>

</div>

</body>

</html></span></span>

---------------------------------------------------------参考资料------------------------------------------------------------------

如何只用CSS做到完全居中

六种实现元素水平居中

CSS制作水平垂直居中对齐

CSS/CSS3 如何实现元素水平居中的更多相关文章

  1. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  2. css确定元素水平居中和垂直居中

    ---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...

  3. css点滴2—六种方式实现元素水平居中

    本文参考文章<六种方式实现元素水平居中> 元素水平居中的方法,最常见的莫过于给元素一个显式的宽度,然后加上margin的左右值为auto.这种方式给固定宽度的元素设置居中是最方便不过的.但 ...

  4. 【css系列】六种实现元素水平居中方法

    一.前言 居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中.垂直居中和水平垂直居中.而其中水平居中相对于后两者来说要简单得多.使用了css3的flexbox的属性轻松 ...

  5. css让浮动元素水平居中

    对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中. 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题.如下: HTML 代码: <div class=&q ...

  6. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  7. CSS样式—— 字体、元素的垂直水平居中

    1.CSS样式与HTML中标签属性的区别: 标签的属性是采用 属性名=“属性值” 表示的 CSS样式是采用名值对 属性名:属性值: 表示的 2.内联元素(行内元素)与块元素 (1)内联元素及其特点: ...

  8. CSS布局：元素水平居中

    CSS布局之元素水平居中 本文将依次介绍在不同条件下实现水平居中多种方法 一.使用 text-align: center : 适用于块级元素内部的行内元素水平居中(也适用于图片的水平居中) 此方法对i ...

  9. CSS3技巧：fit-content水平居中

    当我们让一个模块水平居中首先想到的肯定是margin:0 auto;有木有?那么今天给大家介绍一个fit-content属性,不知道有没有同学用过,如果用过那么你可以略过这篇文章,没用过的同学就继续了 ...

随机推荐

  1. 读数据库表填充DataTable

    我一般用的有2中方法: 1.数据填充 string sqlcmd="select * from table"; SqlDataAdapter adapder = new SqlDa ...

  2. Tair分布式key/value存储

    [http://www.lvtao.net/database/tair.html](特别详细)   tair 是淘宝自己开发的一个分布式 key/value 存储引擎. tair 分为持久化和非持久化 ...

  3. WCF 客户端调用几种方式

    http://www..com/html/blogs/20130413/2116.htm CSDN123 http://developer.51cto.com/art/200911/161465.ht ...

  4. cocos2dx json数据解析

    转自:http://blog.csdn.net/wangbin_jxust/article/details/9707873 cocos2dx本身没有json解析类库,我们这里引入libjson进行解析 ...

  5. 使用RemObjects Pascal Script （转）

    http://www.cnblogs.com/MaxWoods/p/3304954.html 摘自RemObjects Wiki 本文提供RemObjects Pascal Script的整体概要并演 ...

  6. 由“大数据量Excel入库高效方式”瞥见“并联系统”之优势

    使用场景:         当你有一个Excel文件,需要把其中的数据高速录入到数据库中,文件中包含10万条以上数据. 设计方案:        我们将整个过程分成三个阶段,A(装载Excel文件). ...

  7. centos7.2安装配置

    VMware12上安装Centos7,如果电脑是64位,这必须选择64位的centos系统,不然安装完会找不到网卡.安装过程中应当开启网卡选项. 安装完想用ifconfig命令查找IP地址会提示错误: ...

  8. Codeforces Round #260 (Div. 1) D. Serega and Fun 分块

    D. Serega and Fun Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/455/pro ...

  9. codeforces Round #258(div2) D解题报告

    D. Count Good Substrings time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  10. Linux中搭建SVNserver

    一 下载工具 1. subversion-1.6.17.tar.gz 2. subversion-deps-1.6.17.tar.gz 二 解压两个包: 1.在此之前,我已经创建了一个用户svnroo ...