div居中以及div中的元素居中

div水平和垂直居中，text-align和vertical-align不起作用，因為標簽div沒有這兩個屬性，所以再css中設置這兩個值不能居中的效果。

1. div水平居中:設置margin的左右邊距為自動。

div
{
     margin:0 auto;
}

2.   div中的元素居中

2.1 div中的文字居中：將div的行高設置跟其高度一樣的值。

div
{
    height:200px;
    line-height:200px;
}

2.2 div中的圖片居中,方法一：將div的行高設置跟其高度一樣的值，將其中的圖片img外套上標簽i,設置i和div同時垂直居中

div
{
    width: 200px;
    height: 200px;
    line-height: 200px;
    vertical-align: middle;
    background-color: Gray;
}
div i
{
    vertical-align: middle;
}

2.3 div中的圖片居中,方法二：將div轉換成tablecell,讓后設置vertical-align屬性居中。

div
{
    width: 200px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    background-color: Gray;
}

程序員的基礎教程：菜鳥程序員