|
说到CSS居中，咱们首要来思虑水平居中，由于它最为简单。
分为两种状况：
1.行内元素必须水平居中，那咱们 就text-align:center;
2:块级元素必须水平居中，那咱们就margin:auto;
在这儿有些伴侣会问，什么是行内元素，什么是块级元素。
最重点的区别便是块级元素会自动换行，一个元素便是一个块，她会占据父元素的全部空间，会自动换行。而行内元素，它所占据的范围便是它的本身的内容。不会自动换行。
平常的块级元素有 div form table h1 h2 h3 ...，平常的行内元素有Input， a, span,img,label.
接下来咱们来讲一说垂直居中。
分为两种状况：
1.父标签的高度不写死高度，那样很简单，便是padding:10px 0;道理很简单便是上下内边距同样就可。
2.父标签的高度写死的状况下，那样就有了以下的几种办法。
a.首要必定是tabel办法，由于最早的程序员都是这么进行布局的。
<table class="father">
<tr>
<td class="child">
1231123
</td>
</tr>
</table>
b.auto重要字默认自动分配剩余空间，而宽度相针对window是固定的，因此咱们在一起始介绍水平居中的时候，margin:0 auto；自动分配水平空间，可是高度相针对window并非是固定的，因此咱们在运用margin:auto 0的时候，必定相对的是父元素。于是就有了。
<div class="father">
<div class="son">
1233
</div>
</div>
--css--
为保持代码的方便记忆性，我就不写宽高和边框了。
.father{
position:relative;
}
.son{
position:absolute;
margin:auto 0;
top:0;
bottom:0;
}
c.让咱们顺着相对定位来继续讲，这般能够让思维规律更加的连贯。仍然是子元素相针对父元素进行定位。
<div class="father">
<div class="son">
1233
</div>
</div>
--css--
.father{
position:relative;
width:100px;
height:100px;
}
.son{
position:absolute;
top:50%;
width：100px;
height:100px;
}
重视此时是子元素的左上角那个点在垂直居中的位置，可是我此刻得让子元素的水平分割线和父元素的水平分割线处在同一个位置，那样我就得让我的子元素往上面挪一下，挪多少，就挪自己高度的一半，于是我又得加上一句 margin-top:-50px;于是乎这个办法的缺陷亦暴露给了大众，便是我还得晓得元素的高度的一半，必须我去计算，很是不方便。
以上这个新添的一句 等同于
transform:translate(0%,-50%)
有些人爱好把她们分为两种办法，实在是增多了记忆的繁琐，本质便是一个东西。
d.接下来的办法会有点奇怪和难记
<div class="father">
<div class="son">
1233
</div>
</div>
--css--
.father:after{
content:;
display:inline-block;
vertical-align:middle;
height:100%;
}
.son{
display:inline-block;
vertical-align:middle;
}
e.说了以上那样多，还不是为了引出FLEX布局这个大boos。后期准备专门为他写一篇文案，实质工作里面，只要会了FLEX，就能够任我行！
<div c
| 
发表于 2024-6-30 06:15:48