div水平垂直居中求解。

Question

今天面试遇到了一个问题：

<div style="border:1px solid #e3e3e3;width: 200px;height: 200px;"></div>

请在上面的div的style属性里面添加其他属性使其能水平和垂直居中。

Answer 1

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

Answer 2

方法一

#container{
    position:relative;
} 
#center{ 
    width:200px; 
    height:200px; 
    position:absolute;
    top:50%; 
    left:50%; 
    margin:-100px 0 0 -100px;
}

方法二：

#container{
    position:relative;
}
#center{
    position:absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

方法三：

#container{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
#center{
    display:inline/inline-block;
}

方法四：

#container{
    position:relative;
}
#center{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}

方法五：

#container{
    display:flex;
    justify-align:center;
    align-items: center;
}
#center{}

Answer 3

还有一种

position:absolute;
top:50%;
margin-top:-100px;
left:50%;
margin-left:-100px;

以及CSS3

position:absolute;
top:50%;
left:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);

Answer 4

display: table-cell;        //使vertical-align生效
vertical-align: center;       //垂直居中
text-align: center;        //针对行内元素水平居中
margin: 0 auto;            //针对块级元素水平居中

Answer 5

display:table-cell;
text-align:center;
vertical-align:middle;

Answer 6

css3用法学习到了

Answer 7

可以尝试用flex布局

display: flex;
justify-content: center;
align-items: center;

手机编辑 凑合着看

Answer 8

position: relative;
top: 50%;
left:50%;
transform: translate(-50%,-50%);