CSS的垂直居中和水平居中
<h2 style="color: black; text-align: left; margin-bottom: 10px;">前言</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">总括：</strong> CSS居中<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>，居中问题分为垂直居中和水平居中，<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>：<a style="color: black;">CSS居中小谈</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">知乎专栏&&简书专题：<a style="color: black;">前端进击者（知乎）</a>&&<a style="color: black;">前端进击者（简书）</a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">博主博客<span style="color: black;">位置</span>：<a style="color: black;">D</a>amonare的个人博客</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">人生用物，各有天限；夏涝太多，必有秋旱。</strong></p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">正文</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">内联元素居中<span style="color: black;">方法</span></h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">水平居中设置：</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">行内元素 设置 text-align:center；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Flex布局 设置display:flex;justify-content:center;(灵活运用)</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">垂直居中设置：</strong></p>父元素高度确定的单行文本（内联元素） 设置 height = line-height；<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">父元素高度确定的多行文本（内联元素） a:<span style="color: black;">插进</span> table （<span style="color: black;">插进</span><span style="color: black;">办法</span>和水平居中<span style="color: black;">同样</span>），<span style="color: black;">而后</span>设置 vertical-align:middle； b:先设置 display:table-cell 再设置 vertical-align:middle；</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">块级元素居中<span style="color: black;">方法</span></h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">水平居中设置：</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">定宽块状元素 设置 <span style="color: black;">上下</span> margin 值为 auto；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">不定宽块状元素 a:在元素外加入 table 标签（完整的，<span style="color: black;">包含</span> table、tbody、tr、td），该元素写在 td 内，<span style="color: black;">而后</span>设置 margin 的值为 auto； b:给该元素设置 display:inine <span style="color: black;">办法</span>； c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">垂直居中设置：</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.<span style="color: black;">运用</span>position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box{
position:absolute;/*或fixed*/
top:50%;
left:50%;
margin-top:-100px;
margin-left:-200px;
}</div>2.利用position:fixed（absolute）属性，margin:auto这个<span style="color: black;">必要</span>不要忘记了;<div style="color: black; text-align: left; margin-bottom: 10px;">.box{
position: absolute;或fixed
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
}</div>3.利用display:table-cell属性使内容垂直居中,这个<span style="color: black;">办法</span>在多行文字居中的时候用的比较多;<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML代码：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="box">
<span>多行文字，此处居中设置</span>
</div></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS代码：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.box{
display:table-cell;
vertical-align:middle;
text-align:center;
width:100px;
height:120px;
bac<span style="color: black;">公斤</span>round:purple;
}
.box span{
display: inline-block;
vertical-align: middle;
}</div>4.<span style="color: black;">运用</span>css3的新属性transform:translate(x,y)属性;<div style="color: black; text-align: left; margin-bottom: 10px;">.box{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
}</div>5.最<span style="color: black;">高挑</span>上的一种，<span style="color: black;">运用</span>before，after伪元素;<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML代码：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class=box>
<div</div>
太棒了、厉害、为你打call、点赞、非常精彩等。 “NB”（牛×的缩写，表示叹为观止） 楼主果然英明！不得不赞美你一下！
页:
[1]