div中文字水平和垂直居中的css代码

1. HTML元素

   <div>水平垂直居中</div>

2. css样式

   div{
       width:200px;height:200px;  /*设置div的大小*/
       border:1px solid green;    /*边框*/
       text-align: center;        /*文字水平居中对齐*/
       line-height: 200px;        /*设置文字行距等于div的高度 即实现垂直居中*/
       overflow:hidden;
   }

3. 显示效果

   aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAADOCAIAAAASShGQAAADQ0lEQVR4nO3Y0U6jQABAUT59/xzfXK0WBlpuoZ4THgwZYMpcIHGa4XjTqyfAnzDN8zz9m2y2g7Zvnb0ydd6XzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzijojILOKOiMgs4o6IyCzihcvrNp6uY8cq2j51P+3id6886mMauX2DR409l2TGZ5wDm9eWc7xm9a+B0dr57wwfmf07t19vR1OqLj4w4/rT/R2ded9/4ePP+9MeMfwU0vvx3jz+linf28xV/v9cJN/3XMjkW9l8LyRZd3LrcyLT5IOjvcTWeDqzUS5dbxOlt11c5uln/8dg+O3NrZ+Edt6ytTZ6800tngin6u69bxPydzb5LLO5db0dnL/Pq4D97xrcNGzj+Y473z6Oykfu1sHrvpB3U2vn/13flz/Pib9bSu19mDz/fqy2PE+FH3JjCe5oO/9yQu1tnqMszf/9MxcoatVxwfszDb8UN2zOeErtTZwuvhwZM8OF5nq67U2Y3lD9DyUcsDBj+agx/Zz6MGj31w/ud04c7mXTf9JOvkfQbPpzMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKOqOgMwo6o6AzCjqjoDMKt53ZbAdt/zuDo+mMwgeest4QFJUBAQAAAABJRU5ErkJggg==" alt="" />