更新：可直接访问 [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. Lotus 迁移到Exchange POC 之安装Exchange 2010!

    我们登录到Exchange 2010服务器,双击setup 安装Exchange 2010,双击setup.exe完成安装:

  2. 选择一本C++教材

    从上周开始写如何使用C++编程以后,我发现这不是一个容易的题目.因此,我认真的看了一下C++相关的材料,发现现在为止,比较好的材料还是这些: 初学者: Accelerated C++,这是一本学习起来 ...

  3. Mysql用户密码设置修改和权限分配

    我的mysql安装在c:\mysql 一.更改密码 第一种方式: 1.更改之前root没有密码的情况 c:\mysql\bin>mysqladmin -u root password " ...

  4. Java.lang.NoSuchMethodError: org.slf4j.spi.LocationAwareLogger.log(Lorg/slf4j/Marker;Ljava/lang/String;ILjava/lang/String;[Ljava/lang/Object;Ljava/lang/Throwable;)V

    今天接入激光推送,一直报错: Java.lang.NoSuchMethodError: org.slf4j.spi.LocationAwareLogger.log(Lorg/slf4j/Marker; ...

  5. HTML第二天学习笔记

    今天看视频学习的第一个知识是HTML中的块元素<div>和行内元素<span>. <!doctype html> <html lang="en&qu ...

  6. win7和linux下的文件共享

    在vmware虚拟机下安装linux系统,如果自个电脑的win7设置成自动获取IP的话,每次使用FTP文件传输服务器都要检查win7和linux系统的IP是否处于同一网段,如果不是还要手动设置.再有一 ...

  7. .NET常用类库--苏飞合集

    在线网站:http://tool.sufeinet.com/CodePreview/CodeView.aspx?action=view&file=Zip/SharpZip.cs C#基类库大全 ...

  8. 使用 Protocol Buffers 代替 JSON 的五个原因

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  9. C#制作艺术字

    相信 Word  中的 艺术字 功能大家都不陌生, 前面这个 "Word" 单词就是它所为. 今天, 我们就利用C#来制作几款自己的艺术字, 可能会对我们了解字体图像的制作原理有一 ...

  10. Ajax随笔

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...