如何使⽤CSS让⽂本内容在块级元素居中
1.设置line-height等于⽗级块元素⾼度， 同时设置⽔平居中对齐text-align
<!-- div1为⽗级块元素 -->
<div class="div1">
<p>这是⼀⾏需要居中对齐的⽂本</p>
</div>
<style type="text/css">
*{margin: 0px;padding: 0px}
<!-- 对div1设置css属性，长宽250px，背景蓝，宽250px -->
.div1{width: 250px;height: 250px;background: blue;}
<!-- 对p设置css属性，⾏⾼250px，⽂本居中对齐 -->
p{text-align: center;line-height: 250px}
</style>
效果如图
2.设置div1 table-cell vertical-align和text-align 进⾏居中定位
<div class="div1">
这是⼀⾏需要居中对齐的⽂本
</div>
<!-- 对div1设置css属性，长宽250px，背景黄，并作为⼀个表格单元格显⽰，⽂本⽔平垂直居中 -->
.div1{width: 250px;height: 250px;background: yellow;display:table-cell;text-align: center;vertical-align: middle;}
效果如图
3.设置p标签转化成块元素进⾏定位
<div class="div1">
<p>这是⼀⾏需要居中对齐的⽂本</p>
</div>
<!-- 对div1设置css属性，长宽250px，背景蓝，并添加绝对定位（就是打死都不动） -->
.div1{width: 250px;height: 250px;background: blue;position: absolute;}
<!-- 对p标签设置css属性，背景黄，转化块元素，⽂本内容居中，上边距移动50%（⽗元素为参考系）
，向上平移⾃⾝的50%（⾃⼰为参考系） --> p{background: yellow;display: block;text-align: center;margin-top: 50%;transform: translateY(-50%);}
效果如图
div中的div居中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。