面试中遇到的一个问题：如何让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. POJ3368Frequent values[RMQ 游程编码]

    Frequent values Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 17581   Accepted: 6346 ...

  2. FILE不是C语言关键字

    FILE不是C语言关键字,只是标准C中的标准输入输出中定义的一个新的数据类型 stdio.htypedef struct _iobuf{ char* _ptr; int _cnt; char* _ba ...

  3. Visual Studio 2013支持Xamarin的解决方案

    转自博客园[遗忘的代码] Xamarin的Visual Studio插件目前还不支持VS 2013,所以需要在安装Xamarin的VS插件时把2010和2012全选上 (由于我的电脑里只剩2013,而 ...

  4. Linux用户管理.md

    用户与组的概念 linux多用户,多任务的特性 Linux是一个真实的.完整的多用户多任务操作系统,多用户多任务就是可以在系统上建立多个用户,而多个用户可以在同一时间内登录同一个系统执行各自不同的任务 ...

  5. Linux下快速迁移海量文件的操作记录

    有这么一种迁移海量文件的运维场景:由于现有网站服务器配置不够,需要做网站迁移(就是迁移到另一台高配置服务器上跑着),站点目录下有海量的小文件,大概100G左右,图片文件居多.目测直接拷贝过去的话,要好 ...

  6. 匈牙利算法与KM算法

    匈牙利算法 var i,j,k,l,n,m,v,mm,ans:longint; a:..,..]of longint; p,f:..]of longint; function xyl(x,y:long ...

  7. thrift 一个有意思的特性：Class名称无关性

    最近开发的一个项目,后端采用thrift框架来提供rpc服务(java语言实现),然后前端采用php语言来生成thrift client调用后台RPC服务.由于某些原因,上周我把thrift定义文件中 ...

  8. SSH整合 遇到的头疼的BUGs

    折腾了7个小时,一个项目重新的拷贝.编译.部署.运行.测试,我终于知道了产生问题的所在. 问题一:项目编码没有问题,访问会报404 资源不可用 没有进行重新编译,编译完就好了,可能是拷贝项目的时候,没 ...

  9. Jquery揭秘系列：谈谈bind,one,live,delegate事件及实现

    在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate等等. 我们先看看他们的定义,直接进入主题: bind( )方法用于将一个处理程 ...

  10. ES6新特性：Javascript中内置的延迟对象Promise

    Promise的基本使用: 利用Promise是解决JS异步执行时候回调函数嵌套回调函数的问题, 更简洁地控制函数执行流程: 通过new实例化Promise,  构造函数需要两个参数, 第一个参数为函 ...