css的居中如何实现？

在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垂直居中

运行结果：