html中div运用CSS实现水平/垂直居中的多种方式
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">以下例子中，<span style="color: black;">触及</span>到的CSS属性值。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">.parent-frame {
width: 200px;
height: 200px;
border: 1px solid red;
}
.child-frame {
width: 100px;
height: 100px;
border: 1px dotted blue;
}</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1: text-align:center，水平居中</h2>
<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;"><div class="parent-frame">
子元素水平居中
<i style="display:block; text-align: center;color: blue">块状元素，水平居中</i>
</div></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">子元素水平居中</p>块状元素，水平居中
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2：margin: 0 auto，水平居中</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">水平居中。上下外边框距为0，<span style="color: black;">上下</span>外边距浏览器会自动计算平分</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="parent-frame">
子元素水平居中
<i class="child-frame" style="display: block;margin: 0 auto">块状元素，水平居中</i>
</div></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">子元素水平居中</p>块状元素，水平居中
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3：line-height值，垂直居中</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">垂直居中。line-height属性，设置行间的距离（行高）。不<span style="color: black;">准许</span><span style="color: black;">运用</span>负值。</p>单行文本的元素才适用，多行元素中不适用这种<span style="color: black;">办法</span>。元素内容是单行，并且其高度是固定不变的，
<div style="color: black; text-align: left; margin-bottom: 10px;"><div class="parent-frame">
<div style="line-height: 200px;">line-height值=父height值</div>
</div></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">line-height值=父height值</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">4： <span style="color: black;">运用</span>float属性，<span style="color: black;">协同</span>relative定位，实现水平居中</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">给父元素设置float，<span style="color: black;">而后</span>将父元素整体向右移动50%，再将子元素整体向左移动50%，来实现水平居中。</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;"><div class="parent-frame">
<div style="float: left; position: relative; left: 50%; clear: both;" >
<div style="position: relative; left: -50%">虽然宽度<span style="color: black;">区别</span>weiqinl</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">但<span style="color: black;">同样</span></div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">水平居中了</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%"><span style="color: black;">运用</span>float属性，记得清楚浮动</div>
</div>
</div></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">虽然宽度<span style="color: black;">区别</span>weiqinl 但<span style="color: black;">同样</span> 水平居中了 <span style="color: black;">运用</span>float属性，记得清楚浮动</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">5：<span style="color: black;">运用</span>table布局，默认垂直居中</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">table默认垂直居中vertical-align:middle。<span style="color: black;">倘若</span>还想要水平居中，那<span style="color: black;">便是</span>行内元素，添加属性text-align: center</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><table clas</div>
感谢你的精彩评论，为我的思绪打开了新的窗口。 你的见解真是独到，让我受益匪浅。 回顾过去一年，是艰难的一年；展望未来，是辉煌的一年。
页:
[1]