首页 / CSS / CSS垂直水平居中-feishuang008

CSS垂直水平居中-feishuang008

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS垂直水平居中-feishuang008，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2174字，纯文字阅读大概需要4分钟。

内容图文

小小的总结一下：行内元素水平居中用text-align: center;块级元素水平居中用margin-left: auto; margin-right: auto;

首先讨论一下单行时的情况。

毫无疑问，这是最简单的一种情况。

HTML结构如下：

1 <div class="demo">
2     <span>111111111111111111111111111111111111</span>
3 </div>

高度不固定（这种方法同样适用于多行文时的情况，下面就不再讨论）

1 .demo {
2     text-align: center; 
3     padding-top: 20px;
4     padding-bottom: 20px;
5 }

高度固定

1 .demo {
2     text-align: center;
3     height: 100px;
4     line-height: 100px;
5 }

接下来，讨论下多行时的情况。

HTML结构如下：

1 <div class="demo">
2     <span>111111111111111111111111111111111111<br />22222222222222222222</span>
3 </div>

高度不固定时只需要添加pading值就可以，不多加讨论了。

高度固定时

方法一：父元素设置display: table，子元素设置display:table-cell。利用了表格的特性。

 1 .demo {
 2     height: 100px;
 3     display: table;
 4     margin-left: auto;
 5     margin-right: auto;
 6 }
 7 .demo span {
 8     display: table-cell;
 9     vertical-align: middle;
10 }

方法二：父元素设置position: relative，子元素设置position: absolute。主要是利用了translate的中心是相对于元素本身的特点。

 1 .demo {
 2   position: relative;
 3   height: 100px;
 4 }
 5 
 6 .demo span {
 7   position: absolute;
 8   left: 50%;
 9   top: 50%;
10   -webkit-transform: translate(-50%, -50%);
11       -ms-transform: translate(-50%, -50%);
12           transform: translate(-50%, -50%);
13 }

方法三：利用flex布局。

 1 .demo {
 2   height: 100px;
 3   display: -webkit-box;
 4   display: -webkit-flex;
 5   display: -ms-flexbox;
 6   display: flex;
 7   -webkit-box-pack: center;
 8   -webkit-justify-content: center;
 9       -ms-flex-pack: center;
10           justify-content: center;
11   -webkit-box-align: center;
12   -webkit-align-items: center;
13       -ms-flex-align: center;
14           align-items: center;
15 }

方法四：利用:after,:before伪类，结合inline-block的特性实现垂直居中。

 1 .demo {
 2   height: 100px;
 3   text-align: center;
 4 }
 5 
 6 .demo:after, .demo:before {
 7   display: inline-block;
 8   vertical-align: middle;
 9   width: 0;
10   height: 100%;
11   visibility: hidden;
12   content: '';
13 }
14 
15 .demo span {
16   display: inline-block;
17   vertical-align: middle;
18 }

暂时就想到这些了。

内容总结

以上是互联网集市为您收集整理的CSS垂直水平居中-feishuang008全部内容，希望文章能够帮你解决CSS垂直水平居中-feishuang008所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/408815.html

来源：【匿名】