讨论CSS中的各类居中方式

今天主要谈一谈CSS中的各种居中的办法。
首先是水平居中,最简单的办法当然就是

代码如下:

margin:0 auto;

也就是将margin-left和margin-right属性设置为auto,从而达到水平居中的效果。

那么其他的办法呢?容我一一道来:

line-height

首先介绍文字的水平居中方法:

代码如下:

<div class="wrap">刘放</div>

利用line-height设为height的一样即可:

代码如下:

.wrap{
  line-height: 200px;/*垂直居中关键*/
  text-align:center;

height: 200px;
  font-size: 36px;
  background-color: #ccc;
}

效果如下:

padding填充

利用padding和background-clip配合实现div的水平垂直居中:

代码如下:

<div class="parent">
  <div class="children"></div>
</div>

通过backgroun-clip设置为content-box,将背景裁剪到内容区外沿,再利用padding设为外div减去内div的差的一半,来实现:

.parent{
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 width: 100px;
 height: 100px;
 padding: 50px;
 background-color: black;
 background-clip:content-box;/*居中的关键*/

效果如下:

margin填充

接下来介绍margin填充的方式来实现水平垂直居中。
首先我们还是定义父子div:

<div class="parent">
  <div class="children"></div>
</div>

这里我们利用将子div的margin-top设置为父div高度减去子div高度的一半,然后再通过overflow设置为hidden来触发父div的BFC,LESS代码如下:

@parentWidth:200px;
@childrenWidth:50px;
.parent {
 margin:0 auto;
 height:@parentWidth;
 width:@parentWidth;
 background: red;
 overflow:hidden;/*触发BFC*/
}
.children {
 height:@childrenWidth;
 width:@childrenWidth;
 margin-left:auto;
 margin-right:auto;
 margin-top: (@parentWidth - @childrenWidth) / 2;
 background:black;
}

最后得到居中效果如下:

absolute定位

利用position:absolute搭配top,left 50%,再将margin设为负值也可以对div进行水平垂直居中,首先还是需要定义父子div:

代码如下:

<div class="parent">
  <div class="children"></div>
</div>

然后设置相应的css:

.parent {
 position:relative;
 margin:0 auto;
 width:200px;
 height:200px;
 background-color:red;
}
.children {
 position:absolute;
 left:50%;
 top:50%;
 margin:-25px 0 0 -25px ;
 height:50px;
 width:50px;
 background-color: black;
}

其中的margin中的值为该div宽度的一半,最后效果图:

text-align居中

众所周知,text-align可以使得一个div中的内容水平居中。但是如果是要将该div中的子div居中呢?可以将子div的display设为inline-block。

.parent {
 text-align:center;
 margin:0 auto;
 width:200px;
 height:200px;
 background:red;
}
.children {
 positiona;absolute;
 margin-top:75px;
 width:50px;
 height:50px;
 background: black;
 display:inline-block;/*使其父元素text-align生效*/
}

图片居中

一般的图片居中都是和text-align一样,将图片包装在一个div中,将该div的text-align设为center即可。
可以参考下面的链接:
个人站点

有一种特殊的方式,利用了一个图片进行占位,以让父容器获得高宽,从而让进行-50%偏移的图片能有一个参照容器作百分比计算。优点是可以不知道图片的大小,随便放张尺寸不超过父容器的图片上去都能做到居中。另外,兼容性好,IE6都是能顺利兼容的。代码如下:

代码如下:

<div class="parent">
  <p>
    <img class="hidden-img" src="http://nec.netease.com/img/s/1.jpg" alt="" />
    <img class="show-img" src="http://nec.netease.com/img/s/1.jpg" alt="" /></p>
</div>

.parent {
 position:relative;
 width:100%;
 height:200px;
 background:red;
}
p {
 position:absolute;
 top:50%;
 left:50%;
}
.hidden-img {
 visibility:hidden;
}
.show-img {
 position:absolute;
 right:50%;
 bottom:50%;
}

效果如下:

transform居中

上面讲到的div居中的例子中,div的宽度都是固定的,然而实际项目中,有可能遇到不定宽的div,特别是响应式或者移动端的设计中,更加常见。所以下面介绍一种不需要定宽的div水平垂直居中方法。
先上代码:

代码如下:

<div class="parent">
  <div class="children">
    <div class="children-inline">我是水平垂直居中噢!</div>
  </div>
</div>

.parent {
 float: left;
 width: 100%;
 height: 200px;
 background-color: red;
}
.children {
 float:left;
 position:relative;
 top:50%;
 left:50%;
}
.children-inline {
 position: relative;
 left: -50%;
 -webkit-transform : translate3d(0, -50%, 0);
 transform : translate3d(0, -50%, 0);
 background-color: black;
 color:white;
}

效果如下:

首先我们利用float,将需要居中的div的父div也就是children的宽度收缩,然后left:50%,将children的左边与水平中线对齐。这个时候,还没有真正居中,我们需要将children-inner左移动-50%,这样就水平居中了。
再来说说垂直方向,先将children的top设为50%,然后其上边和垂直中线对齐了,同样,我们需要将children-inner上移动-50%。但是这个50%是计算不出来的,所以我们用到了transform : translate3d(0, -50%, 0);
这个方法非常好用噢。

flex居中

最后来介绍一下CSS3中的display:flex来实现的水平垂直居中的方法。

代码如下:

<div class="parent">
  <div class="children">我是通过flex的水平垂直居中噢!</div>
</div>

html,body{
 width: 100%;
 height: 200px;
}
.parent {
 display:flex;
 align-items: center;/*垂直居中*/
 justify-content: center;/*水平居中*/
 width:100%;
 height:100%;
 background-color:red;
}
.children {
 background-color:blue;
}

效果如下:

这种方式最为简便,就是兼容性不好,不过随着时间的前进,各大浏览器一定会都兼容的。

以上就是本文的全部内容,希望大家可以喜欢。

(0)

相关推荐

  • css实现文字垂直居中的代码第1/2页

    CSS中怎样设置才能使对象中的文字垂直居中于对象,这个问题也是捆扰很多朋友的难题.现在网上的很多代码都做不到浏览器兼容.我把网上有关的方法整理了一下,做了些改动,完全可以兼容各主流浏览器. 下面具体说一下在不同情况下垂直居中的方法. 一.一行文字垂直居中 看一下下面的代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

  • css支持标准的图片垂直居中

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js+CSS实现弹出居中背景半透明div层的方法

    本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • css布局网页水平居中常用方法

    页面水平居中一般会令人很头疼,尤其新手.浏览器之间的不兼容也会带来很大问题.下面来说一下常见的页面水平居中办法.  以下内容参见<精通CSS>.  HTML代码:  复制代码 代码如下: <body>   <div id="wrapper">   </div>   </body>   IE居中办法:   body {        text-align:center;        min-width:760px;   }  

  • CSS如何使DIV层居中

    如何使DIV居中主要的样式定义如下: body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明: 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中:对于IE这样设定就已经可以了.但在mozilla中不能居中.解决办法就是在子元素定义时候设定时再加上"MARGIN-RIGHT: auto;MARGIN-LEFT: auto; " 需要说明的是,

  • CSS解决未知高度垂直居中的问题

    除特别说明外,本站内容采用创作共用授权署名和非商业用途,请尊重劳动成果. 原文标题:Vertical Centering in CSS 副标题:Yuhu's Definitive Solution with Unknown Height 翻译:forestgan 尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari等.,可将父级元素显示方式设定为TA

  • 讨论CSS中的各类居中方式

    今天主要谈一谈CSS中的各种居中的办法. 首先是水平居中,最简单的办法当然就是 复制代码 代码如下: margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而达到水平居中的效果. 那么其他的办法呢?容我一一道来: line-height 首先介绍文字的水平居中方法: 复制代码 代码如下: <div class="wrap">刘放</div> 利用line-height设为height的一样即可: 复制代码 代

  • CSS中position属性之fixed实现div居中

    position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 上下左右 居中 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即

  • Beego中ORM操作各类数据库连接方式详细示例

    目录 beego中各类数据库连接方式 1.1 orm使用方式 a. 注册数据库驱动程序 b.注册数据库 c. 注册模型 1.2 操作示例 a. orm连接mysql b. orm连接sqlite3 c. orm连接 postgresql 1.3非orm连接方式 a. mysql b. sqlite3 c. postgresql d. mongodb e.sqlserver f.redis beego中各类数据库连接方式 beego 框架是优秀得go REST API开发框架.下面针对beego中

  • CSS中的滑动门技术

    作者:nobita 2005-5-8 9:39:31ISSN: 1534-0295. 20 October 2003 – Issue No. 160 原文作者:Douglas Bowman 原文出自:A List Apart 中文翻译:54player.com nobita 版权说明:本文中文翻译版权归译者54player.com nobita所有.需要转载发表的,请先与作者联系 在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果.根

  • JavaScript中定义类的方式详解

    本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Javascript如何实现类定义,并创建对象. 一.定义类并创建类的实例对象 在Javascript中,我们用function来定义类,如下: function Sh

  • 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  "的方式直接更改CSS样式. 2. 先在CSS样式表中对特定的类如"active类"设置样式(这里的active类是假定的,暂时不存在),然后再在javascript代码中通过node.classname="active"使得CSS样式表中对active类的样式设

  • JavaScript中错误正确处理方式小结你用对了吗

    JavaScript的事件驱动范式增添了丰富的语言,也是让使用JavaScript编程变得更加多样化.如果将浏览器设想为JavaScript的事件驱动工具,那么当错误发生时,某个事件就会被抛出.理论上可以认为这些发生的错误只是JavaScript中的简单事件. 本文将会讨论客户端JavaScript中的错误处理.主要介绍JavaScript中的易犯错误.错误处理.异步代码编写等内容. 下面就让我们一起看看如何正确处理JavaScript中的错误. Demo演示 本文中使用的demo可以在GitH

  • 通过设置CSS中的position属性来固定层的位置

    定义和用法 position 属性规定元素的定位类型. 说明 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 默认值: static 继承性: no 版本: CSS2 JavaScript 语法: object.style.position="absolute" 实例 定位 h2 元素: h2 { position:absolute; left:100px; t

  • C#中遍历各类数据集合的方法总结

    C#中遍历各类数据集合的方法,这里自己做下总结: 1.枚举类型 复制代码 代码如下: //遍历枚举类型Sample的各个枚举名称 foreach (string sp in Enum.GetNames(typeof(Sample))) { ary.Add(sp); } //遍历枚举类型Sample的各个枚举值 foreach (string sp in Enum.GetValues(typeof(Sample))) { ary.Add(sp); } 2.遍历ArrayList(Queue.Sta

随机推荐