更新：可直接访问 [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. 清除SQL Management Studio记住的用户名和密码

    SQL Server Management Studio 2008 delete the file C:\Users\%username%\AppData\Roaming\Microsoft\Micr ...

  2. 用JS或jQuery访问页面内的iframe,兼容IE/FF

    用JS或jQuery访问页面内的iframe,兼容IE/FF js或者jQuery访问页面中的框架也就是iframe.注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.htm ...

  3. CString和string的互相转换

    CString->std::string 例子: CString strMfc=“test“; std::string strStl; strStl=strMfc.GetBuffer(0); s ...

  4. 非常好的在网页中显示pdf的方法

    今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunkie/web_designers_g ...

  5. .NET开发中的事务处理大比拼

    本文转载:http://www.cnblogs.com/jhxk/articles/2696307.html http://liubaolongg.blog.163.com/blog/static/2 ...

  6. The Aggregate Magic Algorithms

    http://aggregate.org/MAGIC/ The Aggregate Magic Algorithms There are lots of people and places that ...

  7. jQuery生成全页面的悬浮覆盖层效果（overlay）

    可能在大家开发的过程中,往往需要自己生成一个全页面的覆盖层,以便让用户能够把注意力专注于开发者指定的某一个区域,在这里开发小技巧里,我们使用非常简单的代码生成类似的效果,如下: $("#ov ...

  8. jcmd命令使用

    概述 在JDK 1.7之后,新增了一个命令行工具jcmd. 它是一个多功能工具,能够用来导出堆,查看java进程,导出线程信息.运行GC等. 使用演示样例 以下这个命令能够列出当前运行的全部虚拟机: ...

  9. Win7中使用Eclipse连接虚拟机中的Ubuntu中的Hadoop2.4&lt;3&gt;

    经过前几天的学习,基本上能够小试牛刀编写一些小程序玩一玩了,在此之前做几项准备工作 明白我要用hadoop干什么 大体学习一下mapreduce ubuntu重新启动后,再启动hadoop会报连接异常 ...

  10. MySQL常用工具