更新：可直接访问 [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. How Tomcat Works（十三）

    本文分析tomcat容器的安全管理,servlet技术支持通过配置部署描述器(web.xml文件)来对受限内容进行访问控制:servlet容器是通过一个名为验证器的阀来支持安全限制的,当servlet ...

  2. 汇编语言程序入门实验一：在dos下对用户输入作出应答

    汇编语言程序入门实验一:在dos下对用户输入作出应答 1,背景 成功预言了今天要上计算机操作系统上机实验课,昨天预习后,今天的两个上机实验做得很成功.但是也有一些问题.问题1:学校的系统目前是wind ...

  3. JSP文件下载时文件名在ie和firefox下面文件名不一致极其超链接中文乱码的问题的改进

    response.setContentType("application/octet-stream;charset=UTF-8"); fileName=java.net.URLEn ...

  4. d3d导致cairo不正常

    最近要把cairo集成到项目中,却发现cairo不能工作了 折腾了两天才找到了原因:cairo的一个trick导致浮点数计算错误: http://blog.163.com/lvan100@yeah/b ...

  5. Castle IOC容器组件生命周期管理

    主要内容 1．生命处理方式 2．自定义生命处理方式 3．生命周期处理 一．生命处理方式 我们通常创建一个组件的实例使用new关键字,这样每次创建出来的都是一个新的实例,如果想要组件只有一个实例,我们会 ...

  6. libev笔记

    libev是一个开源库,实现了一个reactor模式事件驱动任务调度库.代码非常精简,包含所有实现的.c文件只有不到5000行. 支持的事件类型: ev_io ev_timer ev_periodic ...

  7. (VC)解决绘图时闪烁问题的一点经验[转]

    转自:http://www.cnblogs.com/lidabo/p/3429862.html 清除屏幕闪烁 (转自网上) <一> 由于作图过于复杂和频繁,所以时常出现闪烁的情况,一些防止 ...

  8. （剑指Offer）面试题19：二叉树的镜像

    题目: 操作给定的二叉树,将其变换为源二叉树的镜像. 二叉树的定义如下: struct TreeNode{ int val; TreeNode* left; TreeNode* right; }; 输 ...

  9. AspNet上传文件的几个控件

    本文转载:http://www.cnblogs.com/downmoon/archive/2009/02/05/1384931.html 1.AspnetUpload 地址:http://www.as ...

  10. 【M29】引用计数

    1.引用计数这项技术,是为了让等值对象对象共享同一实体.此技术的发展有两个动机:a.记录堆上分配的对象,是垃圾回收机制的简单原理:b.节省内存,多个对象具有相同的值,存储多次很笨.速度更快,等值对象避 ...