标签：居中 40px center text align height 几种 CSS

1. text-align: center;

1   <div class="center1">
2     <span>111</span>
3   </div>
4 
5   .center1 {
6     text-align: center;
7   }

2. margin: 0 auto;

(需要先制定一个宽度,让块级元素居中,然后让文字居中.)

1     <div class="center2">
2       <span>222</span>
3     </div>
4 
5   .center2 {
6     width: 100%;
7     margin: 0 auto;
8     text-align: center;
9   }

3. table-cell 实现几个块级元素一起居中展示.

 1     <div>
 2       <div class="center3">3111</div>
 3       <div class="center3">3222</div>
 4       <div class="center3">3333</div>
 5     </div>
 6 
 7   .center3 {
 8     display: table-cell;
 9     vertical-align: middle;
10     text-align: center;
11     width: 200px;
12     height: 200px;
13     border: 1px solid red;
14   }

4. 通过line-height和height,设置元素水平垂直居中.

 1     <div class="center4">
 2       444
 3     </div>
 4 
 5   .center4 {
 6     height: 40px;
 7     line-height: 40px;
 8     text-align: center;
 9     background-color: pink;
10   }

5. 使用CSS3 translate

　　transform: translate(-50%, -50%);

6. 使用CSS3 calc 

　　left: calc(50% - 150px);

7. 使用flex布局 (最好用)

 1     <div class="center5">
 2       555
 3     </div>
 4 
 5   .center5 {
 6     display: flex;
 7     height: 40px;
 8     align-items: center; // 水平居中
 9     justify-content: center; // 垂直居中
10     background-color: skyblue;
11   }

标签：居中,40px,center,text,align,height,几种,CSS
来源： https://www.cnblogs.com/james2306/p/15562347.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。