面试中遇到的一个问题：如何让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. CODEVS3037 线段覆盖 5[序列DP 二分]

    3037 线段覆盖 5   时间限制: 3 s   空间限制: 256000 KB   题目等级 : 钻石 Diamond 题解       题目描述 Description 数轴上有n条线段,线段的 ...

  2. alexkn android第一行代码－8.sqlite使用

    Android自带sqlite数据库,因此常见操作应该都掌握.包括数据库的创建/升级以及增删改查. 1.创建数据库 public class MyDatabaseHelper extends SQLi ...

  3. concat() 方法用于连接两个或多个数组。

    我们创建了三个数组,然后使用 concat() 把它们连接起来: <script type="text/javascript"> var arr = new Array ...

  4. [译]Spring构建微服务

    此文为译文,原文地址 介绍 本文通过一个使用Spring.Spring Boot和Spring Cloud的小例子来说明如何构建微服务系统. 我们可以通过数个微服务组合成一个大型系统. 我们可以想象下 ...

  5. RequireJS中的require如何返回模块

    requirejs中定义AMD模块规则如下: define(function(){ var ProductManager={ Create:function(){ console.log(" ...

  6. Android中Shape的使用

    先看一下文档对Shape Drawable的描述: Shape Drawable An XML file that defines a geometric shape, including color ...

  7. eclipse添加js，html，jsp编辑输入补充提示

    1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修改Auto Activation triggers for java的值为:zj ...

  8. 使用 zssh 进行 Zmodem 文件传输

    Zmodem 最早是设计用来在串行连接(uart.rs232.rs485)上进行数据传输的,比如,在 minicom 下,我们就可以方便的用 Zmodem (说 sz .rz 可能大家更熟悉)传输文件 ...

  9. Jquery跨域访问java接口

    Jquery前台代码: <script> $.getJSON("http://跨域URL/Example/text.do?jsonpCallback=?", funct ...

  10. jQuery 复习

    jQuery 复习 基础知识 1, window.onload $(function(){});   $(document).ready(function(){}); 只执行函数体重的最后一个方法,事 ...