面试中遇到的一个问题：如何让css实现水平居中？下面来看一下哪些方法能实现水平居中。

首先分两种情况，行内元素还是块级元素。然而块级元素又分为定宽块状元素和不定款块状元素。先来看下行内元素如何水平居中：

一、行内元素居中：

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。如下实例：

html代码：

<body>

  <div class="txtCenter">我想要在父容器中水平居中显示。</div>

</body>

css代码：

<style>

  .txtCenter{

    text-align:center;

  }

</style>

运行结果：

二、块级元素水平居中：

块级元素有两种：定宽块状元素、不定宽块状元素。先来看一下定宽块状元素：

  1. 定宽块状元素：要想让定宽块状元素水平居中，只需要设置margin-left和margin-right为auto即可实现水平居中。

W3 CSS 2.1 第十章里为常规流替换和非替换块级元素定义了这个算式：

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width of containing block

即左margin+左border+左padding+width+右padding+右border+右margin = 包含块宽度。也就是宽度一定时，若左右边距为auto，浏览器会取它的容器和该容器的宽度之差，除以2，作为该元素的左边距和右边距

同时为几项auto设置了额外的算法：

If there is exactly one value specified as 'auto', its used value follows from the equality.

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

以上是水平居中的原理。代码实例：

html代码：

<body>

  <div>我是定宽块状元素，哈哈，我要水平居中显示，你来打我啊哈哈。</div>

</body>

css代码：

<style>

div{

    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

    width:200px;/*定宽*/

    margin:0px auto;/* margin-left 与 margin-right 设置为 auto */

}

自行运行咯，小的就不在这放运行结果咯。

2、不定宽块状元素水平居中：3种方法：

  • 方法一：加入table标签:

    第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

    第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

    原理：是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法margin:0 auto，使其水平居中。代码实例如下：

html代码：

<div>

 <table>

  <tbody>

    <tr><td>

    <ul>

        <li>我是第一行文本</li>

        <li>我是第二行文本</li>

        <li>我是第三行文本</li>

    </ul>

    </td></tr>

  </tbody>

 </table>

</div>

css代码：

<style>

table{

    border:1px solid;

    margin:0 auto;

}

</style>
  • 方法二：改变块级元素的display为行内元素inline，然后再利用text-align:center设置居中。实例如下：

html代码：

<body>

<div class="container">

    <ul>

        <li><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

    </ul>

</div>

</body>

css代码：

<style>

.container{

    text-align:center;

}

/* margin:0;padding:0（消除文本与div边框之间的间隙）*/

.container ul{

    list-style:none;

    margin:;

    padding:;

    display:inline;

}

/* margin-right:8px（设置li文本之间的间隔）*/

.container li{

    margin-right:8px;

    display:inline;

}

</style>

注：这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

  • 方法三：通过给父元素设置float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

html代码：

<body>

<div class="wrap">

    <div class="wrap-center">我们来学习一下这种方法。</div>

</div>

</body>

css代码：

 <style>

        .wrap{

            position:relative;

            float:left;

            left:50%;

        }

        .wrap-center{

            background:#ccc;

            float:left;

            position:relative;

            left:-50%;

        }

    </style>

三种方法各有优缺点，具体使用哪种方法视情况而定。

css如何实现水平居中呢？css实现水平居中的方法？的更多相关文章

  1. CSS中不定宽块状元素的水平居中显示

    CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...

  2. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  3. 经典CSS坑：如何完美实现垂直水平居中？

    经典CSS坑:如何完美实现垂直水平居中? 踩了各种坑之后总结出的方法,开门见山,直接上代码和效果图.希望对读者有所帮助,后续如果有更好的方法,我也会持续更新 第一种方法:transform(个人认为最 ...

  4. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  5. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  6. CSS居中完全指南——构建CSS居中决策树

    CSS居中完全指南--构建CSS居中决策树 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到CSS居中问题时有章可循. 参考Centering in CSS: A Com ...

  7. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  8. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  9. Atitit.css 规范 bem  项目中 CSS 的组织和管理

    Atitit.css 规范 bem  项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...

  10. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

随机推荐

  1. java 经典程序 100 例

    1,编写程序,判断给定的某个年份是否是闰年.闰年的判断规则如下:( 1)若某个年份能被 4 整除但不能被 100 整除,则是闰年.( 2)若某个年份能被 400 整除,则也是闰年. import ja ...

  2. HTML 学习笔记 JavaScript（数组）

    1.数组的创建 var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是 ...

  3. RSVP协议的基本概念介绍

    2010-06-12 14:12 佚名 互联网 字号:T | T 对于RSVP协议的简单介绍和图解.通过文章,我们将对这个含义的基本概念和结构,以及工作方式等方面的知识有所了解.希望对大家有所帮助. ...

  4. javascript数据类型判断

    javascript基本数据类型:原始类型  和  引用类型 原始类型(简单数据类型):String,Number,Boolean,Undefined,Null,Symbol(ES6新增) 引用类型( ...

  5. 【Python】[面向对象编程] 访问限制，继承和多态

    1.在Python中两个下划线__ 就是带便私有属性 private   注意已两个下划线开头并且结尾的 如 __init__ 是特殊变量,不是私有变量 2.多态,Python的“file-like ...

  6. css样式加载顺序及覆盖顺序深入理解

    注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...

  7. HTML5全局属性和事件详解

    属性: HTML5属性能够赋给标签元素含义和语境,下面的全局属性可用于任何 HTML5 元素. 属性 描述 contenteditable 规定是否允许用户编辑内容. contextmenu 规定元素 ...

  8. 理解javascript this指向

    匿名函数中的this指向window对象 这句话很经典: 每个函数在调用时,其活动对象都会自动获取两个特殊的变量:this和arguments.内部函数在搜索这两个变量时,只会搜到其活动对象为止,因此 ...

  9. bzoj4282慎二的随机数列

    海带头又上线了QwQ~ 这是一个奇怪的lis问题 显然一定存在一种最优答案使所有辨认不清的数都在答案中. [为什么呢]因为你完全可以用一个'N'来替换一个'K'啊QwQ~ 那么在选完所有'N'之后,一 ...

  10. [日常训练]yayamao的神题

    Description $yayamao$是数学神犇,一天他在纸上计算起了$1/P$, 我们知道按照模拟除法可以得到准确解,例如$1/7=0.(142857),1/10=0.1(0)$.$yayama ...