<div id="f1" style="text-align: center;width: 600px;height: 300px;background: red;margin: 10px">
<span id="s1">我是div套span，水平居中使用 text-align: center</span>
</div>
<span id="f2" style="text-align: center;width: 600px;height: 300px;background: red;display: block;margin: 10px">
<span id="s2">我是span套span，水平居中使用display: block把span转成块元素,然后加上 text-align: center</span>
</span>
<div id="f3" style="text-align: center;width: 600px;height: 300px;background: red;margin: 10px;">
<!-- div定宽-->
<div id="s3" style="width: 600px;display: inline">我是div套div，水平居中时按照内部元素是否有宽度来设置居中方法: 1：设置宽度(设置父元素的text-align: center，设置子元素的display: inline)</div>
</div>
<div id="f4" style="text-align: center;width: 600px;height: 300px;background: red;margin: 10px;">
<!-- div不定宽-->
<div id="s4">我是div套div，水平居中时按照内部元素是否有宽度来设置宽度: 2：没有设置宽度(设置父元素的text-align: center)</div>
</div>
<!-- 垂直居中 -->
<div style="width: 200px;height: 200px;vertical-align: middle;background: blue;display: table-cell">
<span style="margin: 0 auto">我是div套span,垂直居中多行行数据的情况：父元素中配置display: table-cell，子元素中配置margin: 0 auto</span>
</div>
<br>
<div style="width: 200px;height: 200px;vertical-align: middle;background: blue;display: table-cell;margin: 1px">
<div style="margin: 0 auto">我是div套div,垂直居中多行行数据的情况：父元素中配置display: table-cell，子元素中配置margin: 0 auto</div>
</div>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/202509.html
