css 水平垂直居中几种方法

具体使用根据情况而定

1、

方法1：display:flex

.box2{    display: flex;    justify-content:center;    align-items:Center;}

 

2、 Table method

试用：通用   --推荐

 1     #parent{
 2         display: table;
 3         height: 100px;
 4         width: 200px;
 5         border:1px solid red;
 6     }
 7      #child{
 8          display: table-cell;
 9          text-align: center;
10          vertical-align: middle;
11      }

 

 <div id="parent">
     <div id="child">测试</div>
 </div>

　　

<div class="box_center">
    <div class="inner"></div>
</div>

.box_center {
    display: table-cell;
    width: 300px;
    height: 300px;
    text-align: center;
    vertical-align: middle;
}
.box_center .inner {
    display: inline-block;
}

 

 

 

3、Transform

试用：通用

 1 .tipsDiv{
 2     width: 100%;
 3     margin: auto;
 4     position: absolute;
 5     top: 50%; left: 50%;
 6     -webkit-transform: translate(-50%,-50%);
 7     -ms-transform: translate(-50%,-50%);
 8     transform: translate(-50%,-50%);
 9     color: #666;
10 }

 

 

 1 .div1{
 2 
 3     width: 100px;
 4     height: 100px;
 5     border: 4px solid red;
 6     position: absolute;
 7 
 8     text-align: center;
 9 
10     left:0;
11     right:0;
12     top: 0;
13     bottom: 0;
14     margin: auto;
15     /*50%为自身尺寸的一半*/
16 }

缺点：

1.必须声明高度（查看可变高度Variable Height）。

2.建议设置overflow:auto来防止内容越界溢出。（查看溢出Overflow）。

3.在Windows Phone设备上不起作用。

 

 

 1 .div1{
 2 
 3     width: 100px;
 4     height: 100px;
 5     border: 4px solid red;
 6     position: absolute;
 7 
 8     text-align: center;
 9 
10     left:50%;
11     top: 50%;
12     margin: -50px 0 0 -50px;
13     /*50%为自身尺寸的一半*/
14 }

 

 

 

　

css3不定宽高水平垂直居中

 justify-content:center;//子元素水平居中
 align-items:center;//子元素垂直居中
 display:-webkit-flex;

   width:100px;

height:28px;

posted on 2016-11-07 18:16  Mc525  阅读(206)  评论(0)    收藏  举报

导航