码迷,mamicode.com
首页 > Web开发 > 详细

CSS垂直居中布局问题

时间:2018-04-05 23:11:18      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:ati   otto   使用   absolute   常见   size   single   情况   text   

最近总被这玩意坑,面试官也老爱问,“还有别的方式吗”.......

1、使用绝对定位

元素在过度受限情况下,将margin设置为auto,浏览器会重算margin的值,过度受限指的是同时设置top/bottom与height或者left/right与width

有点需要注意的是,设置子元素的宽度高度。

技术分享图片
1     <div class="container">
2         <div class="center absolute_center"></div>
3     </div>
HTML

 

CSS:

 1 <style type="text/css">
 2         .absolute_center{
 3             position:absolute;
 4             width:200px;
 5             height:200px;
 6             top:0;
 7             bottom:0;
 8             left:0;
 9             right:0;
10             margin:auto;
11             background:#333;
12             resize:both;/*用于设置了所有除overflow为visible的元素*/
13             overflow:auto;
14         }
15 </style>

 

 

2、文字简单居中

使用lineheight实现简单的垂直居中

1 <div class="single_line">
2       文字文字文字文字文字文字文字TextTextTextTextTextText
3 </div>

 

CSS:

1   <style type="text/css">
2     .single_line{
3       height: 30px;
4       font-size: 14px;
5       line-height: 30px;
6       text-align: center;
7       border: 1px solid #518dca;
8     }
9   </style>

 

3、使用Flex弹性盒子

Flex在移动端的布局中非常常见,但是对低版本的浏览器有兼容性问题。

父容器container需要设置height高度

1 <div class="container">
2             <div class="center">
3             CENTER                
4             </div>
5     </div>

 

 1         .container{
 2           height: 500px;
 3           background: #333333;
 4           display: flex;
 5           justify-content: center;
 6           align-items: center;
 7         }
 8         .center{
 9             width: 100px;
10             height: 100px;
11             background-color: #fff;
12         }

 

 

4、使用transform属性位置偏移

父容器需要设置height

1     <div class="container">
2         <div class= "center">center</div>
3     </div>

 

 1     <style type="text/css">
 2         .container{
 3             height:300px;
 4             background:#d6d6d6;
 5             position:relative;
 6         }
 7         .center{
 8             position: absolute;
 9               top: 50%;
10               left: 50%;
11               transform: translate(-50%, -50%);
12             
13             width:100px;
14             height:100px;
15             background-color:#666;
16         }
17     </style>

 

5、使用table-cell布局

父容器需要设置height、width的值

1     <div class="container">
2         <span class="center">center</span>
3     </div>
 1     <style type="text/css">    
 2         .container{
 3             width:500px;
 4             height:500px;
 5             background:#d6d6d6;
 6             display:table-cell;
 7             text-align:center;
 8           vertical-align:middle;
 9         }
10 
11         .center{
12             background-color:#666;
13         }
14     </style>

 

CSS垂直居中布局问题

标签:ati   otto   使用   absolute   常见   size   single   情况   text   

原文地址:https://www.cnblogs.com/synchronize/p/8724615.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!