CSS各种居中方法（转载）

CSS各种居中方法（转载）

 

1.水平居中的text-align:center 和 margin:0 auto

注1：这两种方法都是用来水平居中的，前者是针对父元素进行设置而后者则是对子元素。

注2：text-align:center起作用的条件是子元素必须没有被float影响，否则一切都是无用功。

注3：margin:0 auto是针对于定宽元素非浮动的。

注4：设置 text-align: center  

ie6-7文本居中，嵌套的块元素也会居中

ff/opera /safari /ie8文本会居中，嵌套块不会居中

解决：

<div style=" text-align: center ">   //ie6-7使用，使嵌套的块元素#inner居中

  <div id="inner" style=" margin-left:auto;margin-right:auto ">

  ff/opera /safari /ie8使用，使#inner居中

  </div>

</div>

 

2.子元素浮动的水平居中方法

方法1：

在上文注2中，我们知道对于有浮动子元素的父元素居中是没有效果的。

但我们可以使用变通的方法达到这一效果，就是在父div上再套一个div。

<div id="outerdiv" style="text-align:center;">
  <div id="containerdiv" style="overflow:hidden; display:inline-block;">
    <div id="float1" style="float:left;"> </div>
    <div id="float2" style="float:left;"> </div>
  </div>
</div>

注1：最外层新加的父元素设置text-align：center；

注2：元父元素加上display：inline-block；

缺点：这种方法用到了display：inline-block；使得里面浮动元素尺寸必须用px，不能使用百分比。

方法2：

父元素与子元素同时左浮动，同时相对定位，父元素left：50%；子元素left：-50%；

例如：

1、HTML 部分：

<div class="box">
    <p>我是浮动的</p>
    <p>我也是居中的</p>
</div>

2、CSS 部分：

.box{
    float:left;
    position:relative;
    left:50%;
}
p{
    float:left;
    position:relative;
    left:-50%;
}

3.垂直居中的line-height

注：作用在子元素上，当他的值等于父元素的height值时，内部的文字就会自动的垂直居中了。此处好像仅仅只能是文字而已，遗憾。

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。

 

4.垂直居中的vertical-align

写在子行内元素上，对子行内元素对齐，一般用于子行内元素多行时。

display:inline-block;

vertical-align:middle;

5.万能的position大法

具体的做法很简单：

①给父元素写上positon:relative，这么做是为了给子元素打上position:absolute的时候不会被定位到外太空去。

②给子元素写上的height和width，这个似乎是必须的，某些浏览器在解析的时候如果没有这2个值的话会出现意想不到的错位。

③整个方法的核心，给子元素再加上：

top:50%;

left:50%

margin-top:一半的height值的的负数;

margin- left:一半的weight值的负数。

整理一下之后，可能你会给你的子元素写上这样的css（当然，父元素也要先写上width和height）：

{

width: 100px;

height: 80px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -50px;

margin-top: -40px

}

解释：

1.top和left百分比是相对父元素高和宽的偏移

2.margin-left，margin-top可以去负值

3.过程如下：