更新：可直接访问 [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. PowerDesigner 12.5 反向工程sql server

    一.设置数据源 1.控制面板 >> 数据源(ODBC)

  2. 如何用C++语言编程（How to program in C++）

    这几年在公司一直带徒弟,每次必教的内容就是C++.在我看来,C++已经有非常好的教材了(注1),实在没有必要从头教起.自学就可以了,可是结果总是不尽人意. 不想再重复一次"把C++当成一门新 ...

  3. C：基本语句

    基本语句知识 do{}while(); 与 while()do{}:for :while 语句的区别: while()do{}:先判断条件是否成立,条件满足则执行循环体 do{}while();是先执 ...

  4. [转]C语言文件输入/输出ACM改进版(freopen函数)

    C语言文件输入/输出ACM改进版(freopen函数) 2009年5月27日 10:379,457 浏览数发表评论阅读评论   文章作者:姜南(Slyar) 文章来源:Slyar Home (www. ...

  5. ClassRequestHandler or VendorRequestHandler wIndex must be less than NumIFs

    P1_ro:20000EEA ClassRequestHandler ; CODE XREF: USB__HandleSetup+38j P1_ro:20000EEA LDRB R0, [R4,#4] ...

  6. 第七届ACM趣味程序设计竞赛第四场（正式赛） 题解

    Final Pan's prime numbers 题目连接: http://acm.uestc.edu.cn/#/problem/show/1272 题意 给你n,要求你在[4,n]范围内找到一个最 ...

  7. JavaScript Design Patterns: Mediator

    The Mediator Design Pattern The Mediator is a behavioral design pattern in which objects, instead of ...

  8. 深入了解android平台的jni---注册native函数

    注册native函数有两种方法:静态注册和动态注册. 1.静态注册方法 根据函数名找到对应的JNI函数:Java层调用函数时,会从对应的JNI中寻找该函数,如果没有就会报错,如果存在则会建立一个关联联 ...

  9. iOS 在类实现定义中声明成员变量的怪异方式

    WebGL 规范(WebGL Specification) 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&quo ...

  10. python 调试工具

    https://github.com/what-studio/profiling http://blog.jobbole.com/51062/ http://blog.jobbole.com/5209 ...