|
居中在 CSS 中用的亦比较平常，总结几种自己比较熟悉的居中的写法。当然，肯定还有更加多更不错的写法，针对文中不足的地区亦欢迎指正。
假设此刻给出这种场景：
<div class="parent">
<div class="child">
DEMO
</div>
</div>
其中在 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 之间的空隙就好了。
例如这种写法，当然写法亦有非常多种，只要保准把空隙去掉就能够了，然则这种办法总觉得写起来有点反人类。
<div class="parent">
<div class="child">
DEMO1</div
><div class="child">
DEMO2</div
><div class="child">
DEMO3</div>
</div>
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.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; /*参照物是父容器*/
left:50%;
transform:translateX(-50%); /*百分比的参照物是自己*/
1.4 dispaly: flex
只兼容IE
| 
发表于 2024-6-30 09:39:18