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

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”>
我在容器中水平笔直居中

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