CSS div居中的几种方法

html-css014

CSS div居中的几种方法,第1张

CSS实现div垂直居中的方法有很多,下面div居中的几种方法是自己平时写网页中经常用到的,最常见的例子就是登录注册弹出框。

方法一:对div使用绝对布局position:absolute并设置top,left,right,bottom的值相等,但不一定都等于0;并且设置margin:auto。

方法二:这个方法要知道div的宽度和高度。对div使用绝对布局position:absolute并把top和left的值都设置为50%;50%就是指页面窗口的宽度和高度的50%;最后将div左移和上移,左移和上移的大小为div宽度和高度的一半。

其中 margin-left:-100px 和 margin-top:-100px 可以写成 margin:-100px  0px  0px  -100px

方法三:div使用绝对定位position:absolute,并且设置left和top的值都为50%。使用css3的transform属性。transform:translate(-50%,-50%)。

以上3种方法的效果如下显示

若有两个div,里面小的div相对于外面大的div水平垂直居中对齐,有以下几种方法。

方法一:利用position和margin:auto实现。父元素设置position:relative;子元素设置position:absolute,并设置top,left,right,bottom值相等。

方法二:使用position。父元素设置position:relative;子元素设置position:absolute。并设置top和left为50%,并设置左移和上移为子元素的大小的一半。

方法三:使用display:flex。这种方法需要设置浏览器的兼容性。

方法四:使用transform:translate()。父元素设置position:relative;子元素设置position:absolute。并设置top和left为50%。最后设置transform:translate(-50%,-50%)。

以上四种方法的效果图如下显示

今天就跟大家分享这么多~如果你有更好的方法,请在下方留言

div+css,图片设置在DIV中垂直居中:

方法一:

思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中。

结构如下:

<div>

<img src="images/tt.gif" width="150" height="100" />

</div>

CSS样式如下:

div {width:300pxheight:150pxbackground-color:#CCCborder:#000 1px solidtext-align:centerpadding-top:50px}

释义:

图片的尺寸为150x100px,DIV的大小为300x200px;

background-color:#CCCborder:#000 1px solid为DIV加个边框和背景色,便于观察效果。

text-align:center,实现图片的水平居中;padding-top:50px,50px这个数值是经过计算得到的,padding-top的值具体算法如下:(DIV的高度 – 图片的高度)/2,但这里要注意,根据盒模型原理,我们还要将DIV原来的高度200减去padding-top的值,这样显示的才是正确的,否则DIV会变高。

方法二:

思路:只用padding属性,通过计算求得居中

结构代码同上;

CSS样式如下:

div {width:225pxheight:150pxbackground-color:#eeeborder:#000 1px solidpadding-top:50pxpadding-left:75px}

备注:这里DIV的宽高计算都遵循盒模型原理,计算方法同上。

方法三:

思路:

利用图片的margin属性将图片水平居中,利用DIV的padding属性将图片垂直居中。

结构代码同上;

CSS代码如下:

div {width:300pxheight:150pxbackground-color:#eeepadding-top:50pxborder:#000 1px solid}

img {display:blockmargin:0 auto}

备注:

Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block然后利用margin:0 auto实现图片的水平居中;(有的设计师为图片再加个div标签,然后通过div标签的margin实现居中