css label 居中布局_css常见问题：块级元素和行内元素在水平和垂直方向怎样居中呢？...

相信大家在写css样式的时候会经常遇到这样一个问题，那就是块级元素和行内元素在水平和垂直方向怎么居中呢？又怎么即在水平方向居中，又在垂直方向居中呢？这里我们来好好地研究一下。

首先，我们先花一点时间了解一下，什么是块级元素？什么又是行内元素？这两个哥们儿之间有啥区别呢？

图片来源于网络

块级元素

定义：简单的来说，默认情况下，块级元素会新起一行。常用块级元素：div 、dl 、form、h1 ~h2 、ol 、p 、table 、ul、li 等等。行内元素

定义：默认情况下，行内元素不会以新行开始(有些行内元素可以设置宽高，属于行内块元素)。常用行内元素：a、b、em、i、img、input、label、span、strong、textarea、u等等。区别

块级元素会新起一行，而行内元素不会新起一行。块级元素可以容纳其他块元素或者行内元素，而行内元素只能容纳文本或其他行内元素；块元素中高度、行高以及顶和底边距都可以控制改变，而行内元素这三项不可改变(除非申明为block或者inline-block)好了，简单的介绍了一下，咱们开始进入正题，怎么解决水平和垂直方向居中以及即在水平方向居中，又在垂直方向居中的问题。

图片来源于网络

首先我们来看一下块级元素 :

HTML部分代码示例：

HTML部分代码

块级元素水平方向居中