一、脱离文档流元素的居中
办法一: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”>
我在容器中水平笔直居中

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;
}

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注