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