如何保持浮层水平垂直居中(面试题)

(一)利用绝对定位与transform

 
"parent">  
"children">
 

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

.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负值为子元素宽高的一半来实现。
代码如下:

      
      
      
    .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存在兼容性问题,所以这种方法没办法跨浏览器兼容。

    
哈哈
  
  .parent
{     width: 400px;     height: 100px;     background: black;     display: table-cell;     vertical-align: middle;     text-align: center;   }   .child{     background: red;     display: inline-block;   }

(六)利用定位与margin:auto

 
    
哈哈
  
.parent
{ width: 600px; height: 400px; background: red; position: relative; } .children{ width: 200px; height: 200px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background: black; }

你可能感兴趣的:(css)