CSS篇之2---如何保持浮层水平垂直居中

如何保持浮层水平垂直居中.notehttp://www.cnblogs.com/yaliu/p/5190957.html

 

（一）利用绝对定位与transform

　　

　　

　     <div class="parent">
　　　　　　<div class="children"></div>
　　　　</div>　

　　将父元素定位，子元素如下

　　

.children {
　　　　position: absolute;
　　　　top: 50%;
　　　　left: 50%;
　　　　-webkit-transform:translate(-50%,-50%);
　　　　background: black;
　　}

 

（二）利用flexbox 

　　.parent{
　　　　justify-content:center;
　　　　align-items:center;
　　　　display: -webkit-flex;
　　}

 

（三）当子元素的宽高固定，父元素内含有除居中元素外其它元素（空标签也行）或者父元素的高度不为0时

　　将父元素定位，子元素绝对定位，利用margin负值为子元素宽高的一半来实现。

　　代码如下：

　　　　<div class="parent">
　　　　　　<div class="children"></div>
　　　　　　<span></span>
　　　　</div>
　　　　.parent{
            　height:400px;//有除对定位元素外其它元素时可不设，若没有则需要
               position: relative;
               background: red;
            }
          .children{
               width: 200px;
               height: 200px;
               margin: -100px 0 0 -100px;
               background: black;
               position: absolute;
               top: 50%;
               left:50%;
          }

　　

（四）利用table

      table的td默认内容垂直居中。只要再设置内容水平居中即可

 

（五）display:table-cell

      CSS中有一个用于 竖直居中 的属性 vertical-align，但只有 当父元素为td或者th时，这个vertical-align属性才会生效，对于其他块级元素，例如 div、p等，默认情况下是不支持vertical-align属性的，可以设置块级元素的display类型为table-cell，激活vertical-align属性，但 display:table-cell; 存在兼容性问题，所以这种方法没办法跨浏览器兼容。

　　

　　<div class="parent">

　　　　<div class="child">哈哈</div>

　　</div>

 

　　.parent {

　　　　 400px;

　　　　height: 100px;

　　　　background: black;

　　　　display: table-cell;

　　　　vertical-align: middle;

　　　　text-align: center;

　　}

　　.child {

　　　　background: red;

　　　　display: inline-block;

　　}

 

display:table-cell的兼容情况

 

（六）利用定位与margin：auto

　　 <div class="parent">

　　　　<div class="child">哈哈</div>

　　</div>

 

       .parent{

               600px;

               height: 400px;

               background: red;

               position: relative;

          }

          .children{

               200px;

               height: 200px;

               position: absolute;

               top: 0;

               left: 0;

               bottom: 0;

               right: 0;

               margin: auto;

               background: black;

          }