前言

  看了好多篇帖子,发现没有一个能够直接让新手很快上手使用水平居中布局的,所以在此进行一番总结,也算是我对水平居中布局的一点点积累沉淀,同时也方便初学者们拿来即用。

一、元素分类

1.行内元素

行内元素,也就是内联元素,可以在一行内显示多个。注:元素的高度、宽度、顶部底部边距均不可设置,元素的高度和宽度就是它包含的文字或图片的高度和宽度。

行内元素有这些:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

当然有些时候可以通过以下代码变成块状元素:

display: block;

2.块状元素

块状元素,霸占一行,别的元素要另起行才可以。注:元素的高度、宽度、顶部底部边距可设置,元素宽度在不设置的情况下,是它本身父容器的100%。

块状元素有这些:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

同样的你也可以通过以下代码把块状元素变为行内元素:

display: inline;

3.内联块状元素

内联块状元素,和行内元素相似,都在可以显示在一行上。注:元素的高度、宽度、行高以及顶和底边距都可设置,实用性较强。

内联块状元素有这些:<img>、<input>

可以通过以下代码把其他元素变为内联块状元素:

display: inline-block;    注:inline-block不支持IE6、IE7,使用时需要额外加上*display:inline;*zoom:1;以触发layout。

二、正常元素的居中方法

a.使用左右外边距自适应方法:

width: 200px;
margin: 0 auto;        /*使用此方法需要变为块状元素,且需要固定宽度*/

b.使用外边距加定位方法:/*此方法不适用于行内元素,需要变为块状元素或内联块状元素*/

width: 500px;
height: 30px;
position:relative;
margin-left: 50%;
left: -250px;        /*250px是元素的宽度除以2得到,且需要进行定位*/

c.父元素设置text-align: center;  /*使用此方法需要变为行内元素或内联块状元素*/

d.对于宽度不确定的元素,可以在外层套上一个table标签,然后给table使用margin: 0 auto来居中:/*此方法只适用于块状元素*/

table{
  width: 960px;
  height: 500px;
  border: 1px solid red;
  margin: 0 auto;
}
.center{
  border: 1px solid blue;
}

HTML代码:

<table>
    <tbody>
        <tr>
            <td>
                <div class="center">
                  我想水平居中!
                </div>
            </td>
        </tr>  
    </tbody>
</table>
 

e.对于宽度不确定的元素,给它和父元素进行定位,分别设置left: -50%和left: 50%,然后实现水平居中:/*此方法只适用于块状元素*/

.father{
  position:relative;
  left:50%;
  width: 960px;
  height: 300px;
  background: yellow;
}
.children{
  height: 30px;
  background:#ccc;
  position:relative;
  left:-50%;
}

HTML代码:

<div class="father">
  <div class="children">aaaaaaaa</div>
</div>

f.使用css3的flexbox居中,要在父元素中设置display:flex和justify-content: center,此方法适用于所有元素,但是存在IE不兼容的情况,PC页面慎用。

flex使用方法:

display:flex;    /*默认为块状元素*/

display:inline-flex; /*变成行内元素*/

居中实例:

.father{

  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;

}

三、浮动元素的居中方法

浮动元素:即使用float: left|right进行浮动操作后的元素。

1.浮动元素不确定宽度时,使用绝对定位,加入left: 50%和margin-left: -81px。

.children{
  text-align: center;
  float: left;
  height: 30px;
  position: absolute;
  left: 50%;
  margin-left: -81px;
  background: #ccc;
}

2.浮动元素固定宽度时,使用相对定位,加入margin-left: 50%和left: -width/2。     /*width/2即固定宽度的一半*/

.children{
  width:500px;
  height:300px;
  float:left;
  margin-left:50%;
  position:relative;
  left:-250px;
  background-color:#CCC;
}

内容持续更新中...

如有错误的地方或者更好用的方法,希望大家能在评论区留言指正,让我们共同进步!

css水平居中总结的更多相关文章

  1. css水平居中那点事

    昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了..…^^ 其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好...这样以后也有利 ...

  2. CSS水平居中

    三种情况:1.行内元素(文本.图片等) 给父元素设置text-align:center;来实现 2.定宽块状元素 <style> div{ border:1px solid blue; w ...

  3. css水平居中,竖直居中技巧(二)

    css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  4. css水平居中,竖直居中技巧(一)

    css水平居中,竖直居中技巧(一)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  5. css水平居中的各种方法

    说到水平居中,大家可能觉得很简单啊,text-align:center 就OK了. 但是,有时候会发现这样写了也没出效果.原因是什么呢?  请往下看. 水平居中:分为块级元素居中和行元素居中 行内元素 ...

  6. CSS水平居中/垂直居中的N个方法

    我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...

  7. CSS水平居中和垂直居中解决方案

    一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...

  8. CSS 水平居中

    一.水平居中:行内元素解决方案 居中元素:文字.链接以及其它行内元素(inline或inline-*类型的元素,如inline-block,inline-table,inline-flex)解决方案: ...

  9. CSS 水平居中/布局 垂直居中 (月经问题)

    水平居中 如果它是一个行内元素 对其父元素使用 text-align:center 即可实现. <p style = " text-align:center; width:300px; ...

  10. CSS 水平居中与垂直居中

    前言 在CSS布局中,水平居中与垂直居中一直是用到比较多的,在本篇中将介绍水平居中.垂直居中的几种方式. 示例 HTML: <div class="parent"> & ...

随机推荐

  1. jpa仓库接口

    可以使用的仓库接口有: Repository: 是 Spring Data的一个核心接口,它不提供任何方法,开发者需要在自己定义的接口中声明需要的方法. CrudRepository: 继承Repos ...

  2. HTTP常见错误 400/401/403/404/500及更多

    HTTP 错误 400 400 请求出错 由于语法格式有误,服务器无法理解此请求.不作修改,客户程序就无法重复此请求. HTTP 错误 401 401.1 未授权:登录失败 此错误表明传输给服务器的证 ...

  3. android EditText控制光标的位置

    利用自定义键盘,需要手动删除编辑框中的文本时,会根据光标的位置来删除字符.那么,如何来控制光标呢,android为我们提供了哪些方法,来处理光标呢? 这里提供几个自己写的方法,根据这些方法可以满足在光 ...

  4. 初学Android 二 创建项目以及目录结构

    命令行创建 android create project Usage: android [global options] create project [action options] Global ...

  5. iOS类别(Category)

    iOS类别(Category)与扩展(Extension) 苹果的官方文档 Category在iOS开发中使用非常频繁.尤其是在为系统类进行拓展的时候,我们可以不用继承系统类,直接给系统类添加方法,最 ...

  6. javascript --执行上下文,作用域

    执行上下文 顾名思意就知道他是动态的,只在代码运行的时候产生 作用域 顾名思意就知道它是一个"领域",并且这个"领域"在一开始就规划好, 不会在改, var d ...

  7. assert

    assert responseTP.length() > 0," TP response is empty, please check it "

  8. C# is与as

    1.使用场景: 强制类型转换,有可能会导致异常.is与as就是为了解决这一问题,is与as永远不会抛出异常. 2.is判断一个对象是否兼容于指定的类型,考虑里氏代换.Dog是Animal,而Anima ...

  9. 将PHP作为Shell脚本语言使用

    我们都知道.PHP是一种非常好的动态网页开发语言(速度飞快.开发周期短--).可是仅仅有非常少数的人意识到PHP也能够非常好的作为编写Shell脚本的语言,当PHP作为编写Shell脚本的语言时,他并 ...

  10. 实现经常使用的配置文件/初始化文件读取的一个C程序

    在编程中,我们常常会遇到一些配置文件或初始化文件. 这些文件通常后缀名为.ini或者.conf.能够直接用记事本打开.里面会存储一些程序參数,在程序中直接读取使用.比如,计算机与server通信.se ...