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部分代码

块级元素水平方向居中

效果图：

效果图

1. 利用margin：0 auto进行水平方向居中

css部分代码示例：

css代码

2. 利用绝对定位+负边距进行水平方向居中

css部分代码示例：

css代码

3. 利用绝对定位+margin ： auto进行水平方向居中

css部分代码示例：

css代码

4. 利用弹性盒布局进行水平方向居中

css部分代码示例：

css代码

5. 利用将子元素设置成行内元素或者行内块元素

css部分代码示例：

css代码

块级元素垂直方向居中

效果图：

效果图

1. 利用绝对定位+负边距进行垂直方向居中

css部分代码示例：

css代码

2. 利用绝对定位+margin ： auto进行垂直方向居中

css部分代码示例：

css代码

3. 利用弹性盒布局进行垂直方向居中

css部分代码示例：

css代码

4. 利用绝对定位+transform进行垂直方向居中

css部分代码示例：

css代码

现在我们来看一下行内元素 :

HTML部分代码示例：

HTML部分代码

行内元素水平居中

效果图:

效果图

1. 利用text-align: center实现水平居中,行内元素一般就是利用这个

css部分代码示例：

css代码

行内元素垂直居中

效果图:

效果图

1. 利用行高line-height来解决

css部分代码示例：

css代码

2. 利用弹性盒布局来解决

css部分代码示例：

上面就是一些我总结的水平或者垂直居中的方法,现在我们来看一下即在水平方向居中，又在垂直方向居中怎么解决。

图片来源于网络

水平垂直方向同时居中

效果图：

效果图

1. 利用inline-block的vertical-align: middle去对齐span,实现高度反向对齐

HTML代码示例：

css部分代码示例：

2. 利用绝对定位+负边距进行水平垂直居中

HTML部分:

css部分代码示例：

3. 利用绝对定位+margin:auto进行水平垂直居中

HTML部分:

css部分代码示例：

4. display: table-cell

HTML部分:

css部分代码示例：

总结

CSS3的transform和flex固然好用，但在项目的实际运用中必须考虑兼容问题，大量的hack代码可能会导致得不偿失。

某些浏览器仍需使用前缀写法:

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: -moz-box;

display: -moz-flex;

display: flex;

浏览器对最新版本的flexbox 的支持情况如下：

Chrome 29+Firefox 28+Internet Explorer 11+Opera 17+Safari 6.1+ (prefixed with -webkit-)Android 4.4+iOS 7.1+ (prefixed with -webkit-)