在css進行布局的時候，會經常出現讓div居中，div內容居中，div圖片居中，css垂直居中，

1.div居中

通過對body設置text-align:center，再對div設置margin：0 auto使div居中。

居中

body{

text-align:center

}

.div1{

width: 400px;

height: 100px;

border: 1px solid red;

margin: 0 auto;

}

運行結果：

2.div內容居中

通過設置text-align: center使div內容居中,包括div內部css字體，圖片水平居中

居中

.div1{

width: 400px;

height: 100px;

border: 1px solid red;

text-align: center;

}

div內容居中

3.css垂直居中

設置line-heigh（行高）和height（高）值相同，可以實現css垂直居中

居中

body{

text-align: center;

}

.div1{

width: 200px;

height: 50px;

line-height: 50px;

border: 1px solid red;

margin: 0 auto;

}

div垂直居中

運行結果：