图片-小白之家
图片-小白之家
图片-小白之家
图片-小白之家

css 居中(div css居中的几种方法)

一、脱离文档流元素的居中

办法一:margin:auto法

CSS代码:

div{width:300px;height:300px;position:relative;border:1pxsolid#465468;

}img{position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;

}

HTML代码:

<div><imgsrc=”prince.png”>div>

效果图:

当一个元素绝对定位时,它会依据第一个不是static定位的祖先元素定位,因此这儿的img依据外层div定位。

办法二:负margin法

CSS代码:

.container{width:500px;height:400px;border:2pxsolid#379;position:relative;

}.inner{width:480px;height:380px;background-color:#746;position:absolute;top:50%;left:50%;margin-top:-190px;/*height的一半*/margin-left:-240px;/*width的一半*/}

HTML代码:

class=”container”>

class=”inner”>

效果图:

这儿,咱们首先用top:50%和left:50%让inner的坐标原点(左上角)移动到container的中心,然后再利用负margin让它往左偏移本身宽的一半,再往上偏移本身高的一半,这样inner的中心点就跟container的中心点对齐了。

二、未脱离文档流元素的居中

办法一:table-cell法

CSS代码:

div{width:260px;height:230px;border:3pxsolid#555;display:table-cell;vertical-align:middle;text-align:center;

}img{vertical-align:middle;

}

HTML代码:

<div><imgsrc=”prince.png”>div>

效果图:

div上面的vertical-align:middle是控制笔直方向上的居中的,而text-align:center是控制水平方向的。一个风趣的事实是,当咱们去掉img的vertical-align:middle之后,是这样的:

还是居中啊!真的居中吗?

咱们看到,图片往上移了一点,在笔直方向上已经不居中了。为什么?我也不知道,假如你知道,能够告诉我,不胜感激。

可是假如咱们把图片换成文字:

CSS代码:

div{border:3pxsolid#555;width:300px;height:200px;display:table-cell;vertical-align:middle;text-align:center;

}span{vertical-align:middle;

}

HTML代码:

<div><span>这是放在span中的文字,通过外层div设置display:table-cell以及vertical-align:middle完成笔直居中。span>div>

效果图:

当咱们把span的vertical-align:middle去掉之后是这样的:

看到差别没?文字的行间距更小了。假如你在自己电脑上运转代码就会发现,这几行字是向中间靠了,而并没有像图片一样往上移。我也在想办法搞清楚这是怎么回事,假如你知道原因,也烦请告诉我。

办法二:弹性盒子法

CSS代码:

.container{width:300px;height:200px;border:3pxsolid#546461;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;

}.inner{border:3pxsolid#458761;padding:20px;

}

HTML代码:

class=”container”>

class=”inner”>

我在容器中水平笔直居中
图片[1]-css 居中(div css居中的几种方法)-小白之家,divcss居中的几种方法,居中在CSS顶用的也比较常见,总结几种自己比较了解的居中的写法。当然,肯定还有更多更不错的写法,关于文中不足的当地也欢迎纠正。

假定现在给出这种场景:

DEMO

其中在class=’child’这个div中的内容长度是不一定的,现在需求实现这个div的居中。

水平居中

1.1display:inline-block

在块级父容器中让行内元素或许类行内元素居中,只需运用text-align:center,

这种办法能够让inline/inline-block/inline-table/inline/flex居中。

.child{

display:inline-block;

/*子元素文字会继承居中,因而要在上面写上向左面居中*/

text-align:left;

}

.parent{

text-align:center;

}

当有多个childdiv的时分假如设置display:inline-block的时分需求留意每个div之间会有缝隙,这不是什么bug,特性就是如此。。

假如想去掉这些缝隙的话,有几种解决办法:

1.去掉HTML中的空格。

元素之间留白距离出现的原因是因为标签段之间的空地,这个时分只需求去除掉HTML之间的空地就好了。

比如这种写法,当然写法也有很多种,只需保证把空地去掉就能够了,可是这种办法总觉得写起来有点反人类。

DEMO1

DEMO2

DEMO3

2.运用margin负值

这种办法这个负的值不太好确认,和上下文的字体等等都有关,这种办法不太适合大规模的运用。

.child{

margin-right;-5px;

}

3.运用font-size:0

这种办法能十分简单地这个距离问题,只需求将父div的font-size设为0,然后记得将子div的font-size属性设置回来即可。

.parent{

font-size:0;

}

.chilc{

font-size:16px;

}

4.运用letter-spacing或许word-spacing

.parent{

letter-spacing:-5px;

/*或许*/

word-spacing:-5px;

}

.chilc{

letter-spacing:0;

/*或许*/

word-spacing:0;

}

1.2display:table

table元素的宽度也是跟着内容走,居中的时分加上margin即可。兼容IE8。

假如不设置成table,设置成其他块级元素也能够,可是要强调设置宽度width,不然会拉伸成父元素的宽度。(留意加上width这种办法拓展性欠好,假如childdiv里边的内容很长的话或许超越设置的width的宽度)

.child{

display:table;

margin:0auto;

}

1.3position:absolute

absolute元素的宽度默许也是由内容决议

这种办法的长处是居中的元素不会对其他元素产生影响脱离正常流

.parent{

position:relative;

}

.child{

position:absolute;/*参照物是父容器*/

left:50%;

transform:translateX(-50%);/*百分比的参照物是本身*/

1.4dispaly:flex

只兼容IE10+

.parent{

display:flex;

justify-content:center;

}

/*或许*/

.child{

margin:0auto;

}

2.笔直居中

2.1display:table-cell

能够使高度不同的元素都笔直居中

.parent{

display:table-cell;

vertical-align:middle;

}

2.2position:absolute

.parent{

position:relative;

}

.child{

position:absolute;

top:50%;/*参照物是父容器*/

transform:translateY(-50%);/*百分比的参照物是本身*/

}

2.3display:flex

只兼容IE10+

.parent{

display:flex;

align-items:center;

}

/*或许*/

.child{

margin:0auto;

}

3.水平笔直居中

这种就只需求把前几种的结合起来就行了,主要有三种常见的办法。

3.1inline-block+table-cell

.child{

display:inline-block;

text-align:left;

}

.parent{

text-align:center;

display:table-cell;

vertical-align:middle;

}

/*子元素文字会继承居中,因而要在上面写上向左面居中*/

3.2absolute+transform

.parent{

position:relative;

}

.child{

position:absolute;

left:50%;

top:50%;/*参照物是父容器*/

transform:translate(-50%,-50%);/*百分比的参照物是本身*/

}

3.3flex+align-items+justify-content

.parent{

display:flex;

justify-content:center;

align-items:center;

}

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容

图片-小白之家
图片-小白之家