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）好了，简单的介绍了一下，咱们开始进入正题，怎么解决水平和垂直方向居中以及即在水平方向居中，又在垂直方向居中的问题。

首先我们来看一下块级元素/p>

HTML部分代码示例：

块级元素水平方向居中

效果图：

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

css部分代码示例：

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

css部分代码示例：

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

css部分代码示例：

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

css部分代码示例：

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

css部分代码示例：

块级元素垂直方向居中

效果图：

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

css部分代码示例：

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

css部分代码示例：

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

css部分代码示例：

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

css部分代码示例：

现在我们来看一下行内元素/p>

HTML部分代码示例：

行内元素水平居中

效果图/p>效果图

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

css部分代码示例：

行内元素垂直居中

效果图/p>效果图

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

css部分代码示例：

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

css部分代码示例：

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

水平垂直方向同时居中

效果图：

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

HTML代码示例：

css部分代码示例：

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

HTML部分/p>

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;

displaylex;

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

Chrome29+Firefox28+InternetExplorer11+Opera17+Safari6.1+(prefixedwith-webkit-)Android4.4+iOS7.1+(prefixedwith-webkit-)