关于div居中的话题

场景一

div本身相对body水平居中

那么div只要<div style="margin:0 auto;width:50%">ooooo</div>就可以,这里div一定要有宽度,不然就是100%,这表示,右左margin值一样,当然会水平居中啦

div内部元素水平居中

其实并没有直接的属性,只有一个text-align,可是从字面的意思就知道,这个东西是用来文字居中的,可是谁会希望文字居中呢,除非只有一行字.

所以还是要在div里面再套一个div,用<div style="margin:0 auto;width:50%">ooooo</div>,不过text-align在IE6里面却是可以居中非文字元素的.

但很多的时候,我们需要居中一个浮动层,比如各种提示框,

我们发现一个div一但浮动起来,这个margin:0 auto就没有用了,auto没有用了,就不能自动居中,不能自动居中,就要手动居中,手动居中,就无非是以下两个方式

margin : 0 50%

给div加一个relative,然后再left:50%,这所谓的50%到底是多少,都是从父级的宽度来决定的,

OK

1.如果我们的div是postion是relative,宽度是600px,我们就可以这样做

<div style="margin-left:-300px;left:50%;background-color:Red;width:600px;position:relative">
dffd
</div>

原理是先居中,再向左偏移一半的宽度.

其实这样写也行

<div style="margin-left:50%;left:-300px;background-color:Red;width:600px;position:relative">
dffd
</div>

效果都是一样

可是有人说,我偏不用relative,我用float:left

一般不会有这样的人,可是面试官可能会考你

这样的话,你就要整两个div

<div style="margin-left:50%;width:50%;float:left">
<div style="margin-left:-50%;background-color:Red;width:100%;">
dffd
</div>
</div>

这样就OK了

下面说垂直居中

看了上面的代码,

我们很容易想到

<div style="margin-top:50%;width:50%;float:left">
<div style="margin-top:-50%;background-color:Red;width:100%;">
dffd
</div>
</div>

可是完全行不通,因为margin-top我感觉是史上最奇葩属性,他的百分比是根剧父级宽度决定的,而不是高度.

也就是说,如果div越宽,那么margin-top值越大

所以说,对于div里面的div垂直居中的问题,还是要用top来实现,所以还是要用relative

<div style="position:relative;border:1px solid;left:50%;top:50%">
<div style="width:200px;height:200px;border:1px solid;position:relative;left:-50%;top:-50%">aaaaa</div>
</div>
</div>

这就是水平与垂直都居中的样子

另外,css有一个属性,就是vertical-align:middle,不过这个属性只对有inline-block的元素有用

啥是inline-block元素,就是那些有行内元素和块元素同共特点的元素,比如文本框 ,按纽,他们可以设置长度,又不占一行

所以 div 的vertical-align:middle是没有用的

如果只是显示一行文字,可以把line-height设置同div一样高,这样就垂直居中了