html实现整体居中的⽅法，实现CSS居中的多种⽅法
居中在 CSS 中⽤的也⽐较常见，总结⼏种⾃⼰⽐较熟悉的居中的写法。当然，肯定还有更多更不错的写法，对于⽂中不⾜的地⽅也欢迎指正。
假设现在给出这种场景：
DEMO
其中在 class='child' 这个 div 中的内容长度是不⼀定的，现在需要实现这个 div 的居中。
⽔平居中
1.1 display: inline-block
在块级⽗容器中让⾏内元素或者类⾏内元素居中，只需使⽤ text-align: center，
这种⽅法可以让 inline/inline-block/inline-table/inline/flex 居中。
.child {
display:inline-block;
/*⼦元素⽂字会继承居中，因此要在上⾯写上向左边居中*/
text-align:left;
}
.parent {
text-align:center;
}
当有多个 child div 的时候如果设置 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;
}
css设置文字垂直居中.chilc {
letter-spacing: 0;
/*或者*/
word-spacing: 0;
}
1.2 display:table
table 元素的宽度也是跟着内容⾛，居中的时候加上 margin 即可。兼容IE8。
如果不设置成table，设置成别的块级元素也可以，但是要强调设置宽度width，不然会拉伸成⽗元素的
宽度。(注意加上 width 这种⽅法拓展性不好，如果 child div ⾥⾯的内容很长的话可能超过设置的 width 的宽度)
.child {
display:table;
margin:0 auto;
}
1.3 position: absolute
absolute 元素的宽度默认也是由内容决定
这种⽅法的优点是居中的元素不会对其他元素产⽣影响 脱离正常流
.parent {
position:relative;
}
.child{
position:absolute; /*参照物是⽗容器*/
transform:translateX(-50%); /*百分⽐的参照物是⾃⾝*/ 1.4 dispaly: flex
只兼容IE10+
.parent {
display:flex;
justify-content:center;
}
/*或者*/
.child{
margin：0 auto;
}
2.垂直居中
2.1 display: table-cell
可以使⾼度不同的元素都垂直居中
.parent {
display:table-cell;
vertical-align:middle;
}
2.2 position: absolute
.parent {
position:relative;
}
.child{
position:absolute;
top:50%; /* 参照物是⽗容器 */
transform:translateY(-50%); /*百分⽐的参照物是⾃⾝ */ }
2.3 display: flex
只兼容IE10+
.parent {
display:flex;
align-items:center;
}
.
child{
margin：0 auto;
}
3.⽔平垂直居中
这种就只需要把前⼏种的结合起来就⾏了，主要有三种常见的⽅法。
3.1 inline-block + table-cell
.child {
display:inline-block;
text-align:left;
}
.parent {
text-align:center;
display:table-cell;
vertical-align:middle;
}
/*⼦元素⽂字会继承居中，因此要在上⾯写上向左边居中*/
3.2 absolute + transform
.parent {
position:relative;
}
.child{
position:absolute;
left:50%;
top:50%; /*参照物是⽗容器*/
transform:translate(-50%,-50%); /*百分⽐的参照物是⾃⾝*/
}
3.3 flex + align-items + justify-content
.parent {
display:flex;
justify-content:center;
align-items:center;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。