CSS里的各种水平垂直居中基础写法心得总结
网站建设 2021-07-03 08:43www.dzhlxh.cn网站建设
（W3C标准，概念不清的看手册很重要哦）
--------------------------------------------------------------------------------
首先，依旧是概念。介绍一下行内元素和块级元素，这个很重要，因为有的属性只能用于块元素，而有的正好相反，在一定的情况下，它们也可以相互转换，比如用display来进行设置。
行内元素（又叫内联元素inline element）:
①不占据一整行，随内容而定，有以下特点：
②不可以设置宽高，也不可以设置行高，其宽度随着内容增加，高度随字体大小而改变。
③内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。
④也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用。
常用的内联元素有：
a - 锚点，b - 粗体(不推荐)，br - 换行，em - 强调，font - 字体设定(不推荐)，i - 斜体，img - 图片，input - 输入框，label - 表格标签，select - 项目选择，small - 小字体文本，span - 常用内联容器，定义文本内区块，strike - 中划线，strong - 粗体强调
块级元素block element：
①总是在新行上开始，占据一整行；
②高度，行高以及外边距和内边距都可控制；
③宽带始终是与浏览器宽度一样，与内容无关；
④它可以容纳内联元素和其他块元素。
常用的块级元素有：
div -最常用的块级元素，dl - 和dt dd搭配使用的块级元素，form - 交互表单，h1 - 大标题，hr - 水平分隔线，ol - 排序表单，p - 段落，ul - 非排序列表
互相转换：使用display设置可以使得行内元素拥有块级元素的特性，反之也可以。
如：
<p style="display:inline; text-align:center">我是被设置了内联的块元素p，我现在的表现形式和内联元素一样啦</p>
<span style="display:block; text-align:center">我是被设置了块级元素的span，我现在可以独占一行并且可以设置宽高</span>
display: table-cell ，能把元素当作表格单元来显示，这个非常实用，显示效果也很好，只可惜某些浏览器不够兼容。要注意，和一个合法的<td>元素必须在<table>里一样，
display: table-cell 元素必须作为 display: table 的元素的子元素出现。
--------------------------------------------------------------------------------
现在开始说一下简单的几种基础的居中方式：
1.块中文字水平居中：text-align 用于块级元素，作用在使用它的块元素中的文字或者图片上。使得它们在水平方向上居中。
这个属性只能作用于块元素（或者被CSS控制为块元素的内联元素，但是被控制为内联元素的块元素是不行的）。一句话来说，就是要拥有块元素的特点的那些元素。这个很好理解，居中，肯定是行居中，如果使用它的元素本身不拥有完整的在宽度上的独立空间，它当然没有能力让它内部的文字或者图片居中。（难道要占用别人的地盘里居中，岂不混乱啦）
例子：
<p style="text-align:center">我是正常p,我设置了居中</p>
<span style="display:block; text-align:center">我其实是一个行内元素span哦，我设置了居中，可以居中并且独占一行</span>
<p style="display:inline; text-align:center">能不能再同一行,我是被inline了的p，我设置了居中可是不能居中！</p>
父元素的这个属性对它狼蚁网站SEO优化的子元素也起作用，比如一个div设置了text-align居中，则它内部的文字可以居中，它的子div内部的文字也可以居中。但是子元素中文字的居中，是在子div中居中，而不是对于父div居中。也就是，它里面所有的文字，都会相对于最靠近自己的一层div来实现居中。所以，这个属性不能用于div在父div中的整体居中。（不仅仅是div，所有的表现为块元素的元素）。
狼蚁网站SEO优化的这段代码，外面一个大的蓝色的div，里面一个小的红色的div。外部的div设置了水平居中，按说里面的图片肯定会居中（运行时确实显示居中），
而内部的div只设置了vertical-align，垂直居中（先不管它）。可是因为它父层的text-align对它也有影响，所以运行时，里面的文字会相对于内部div而居中（注意！不是相对于最外面的div)
<div style="width:500px; height:200px; background-color:#39F; text-align:center">
<img src="dog/134906m121hqwumyw3uudc.jpg" width="96" height="80" />
<div style="width:100px; height:50px; background-color:#F69; display: table-cell;vertical-align:middle">啦啦啦</div>
</div>
运行截图：
这个是块元素对内处理的一个属性，不能把这个块自己在它的父容器中居中，若要实现块在父元素中的居中，可以使用：
2 块元素自身水平居中（确定设置了宽度的块）：margin。这个肯定是接触CSS一开始就知道的了。
一般情况下，可以设置margin:0 auto;这会使这个块级元素在它的父级元素中居中，上下左右都会居中。
如果只要水平居中的话，就设置margin-left:auto;margin-right:auto;
3 块元素自身水平居中（不确定宽度的块）：
在其他的一些文章中，看到有不少方法来介绍不确定宽度的块的居中的。
其实简单点说，不需要这么麻烦。我们可以这样来理解，没有明确设定宽度的block，根据块级元素的性质，它默认是独占一行的，所以这个时候block本身就是浏览器窗口的宽度，就不必要来设置水平居中了。
若是此时对块中的内容进行居中的话：
如果块元素的子元素也为块元素，就对子元素使用margin auto一类的方式就好啦；
如果块级元素的子元素为行内元素，就用我们一开始介绍的text-align也就可以解决；
对于子元素为块元素的，也可以用display设置为inline然后再用text-align。
（这些在本文其他地方也都说过了）
4 vertical-align用于行内元素中的垂直居中
vertical-align，这个可以用的很复杂。看了一些文章和例子，自己也有点小混乱，只说一下最简单的用法：
这个属性用于
1、内联元素（以及被转化为内联元素的块元素）
2 、display设置为table-cell的元素，
在 firefox 和 ie8 下，可以设置块级元素的 display 值为 table-cell，来激活 vertical-align 属性，显示效果和就和表格中的 valign="center" 一样了。但 ie6,7 并不支持。
3、<td><tr>这样的元素
这样的写法：vertical-align:middle;就可以设置文字或者图片的垂直居中。只要具有行内元素的特性的元素使用这个属性，对它的子元素中的文字和图片也是起作用的。但是作用效果为使得文字或者图片相对于紧靠着它们的父元素来进行居中。这个和text-align上面说过的部分是类似的。
5 块级元素中的文字图片垂直居中（针对块的高度确定的，这个是从另一个博客上看到的，真的很实用哦，如果块内只有这些文字的话）
文字在层（块级元素）中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!
<div style="line-height:500px;height:500;"></div>
6 块级元素中的文字图片垂直居中（块的高度不确定的）
在块的高度不确定的情况下，其实它的高度就是取决于里面内容的高度。如果内部只有文字或者图片的话，那就自然垂直居中了，其实就不必特意要设置。
如果非要设置什么的话，比如希望块大一些，文字在块中垂直居中好看一点，可以设置内边距，如padding-top:20px;padding-bottom:20px；
当然，如果上下内边距设置的不一样，就自然不居中了。
7 块级元素自身的垂直居中
设置块级元素自身在父元素中的垂直居中，可以参照块级元素的水平居中的方法（上面说过），设置外边距即可。如果不想设置水平居中，只要设置上下外边距为auto就好。
也可以采用vertical-align:middle;的方式，但是前提是把display设置为table-cell。这样的话要注意浏览器兼容性问题。
--------------------------------------------------------------------------------
评论中有朋友希望能贴参考文章的地址，现在找了当时看的一些来贴一下，只有一部分，很多是随机看的。是疏忽了，应该当时记下来才是~
http://www.blueidea.com/tech/web/2006/3231.asp 【CSS实现完美垂直居中】
http://www.cnblogs.com/asqq/archive/2012/04/09/2438745.html 【CSS各种居中方法】
http://www.php100.com/html/webkaifa/DIV_CSS/2010/0826/5303.html 【完美解决CSS网页水平居中】
【CSS的各种居中——如何书写高质量代码】
还有很多“百度知道”.....
有的比较复杂的灵活用法就没有写上去，只能保证总结的这些都是用过和试过的，比较常用和基础的，应该是没有问题的。也请大家多多指教呐~
还有利用position的这部分，过几天，再试一试之后再继续做一下笔记~
--------------------------------------------------------------------------------
首先，依旧是概念。介绍一下行内元素和块级元素，这个很重要，因为有的属性只能用于块元素，而有的正好相反，在一定的情况下，它们也可以相互转换，比如用display来进行设置。
行内元素（又叫内联元素inline element）:
①不占据一整行，随内容而定，有以下特点：
②不可以设置宽高，也不可以设置行高，其宽度随着内容增加，高度随字体大小而改变。
③内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。
④也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用。
常用的内联元素有：
a - 锚点，b - 粗体(不推荐)，br - 换行，em - 强调，font - 字体设定(不推荐)，i - 斜体，img - 图片，input - 输入框，label - 表格标签，select - 项目选择，small - 小字体文本，span - 常用内联容器，定义文本内区块，strike - 中划线，strong - 粗体强调
块级元素block element：
①总是在新行上开始，占据一整行；
②高度，行高以及外边距和内边距都可控制；
③宽带始终是与浏览器宽度一样，与内容无关；
④它可以容纳内联元素和其他块元素。
常用的块级元素有：
div -最常用的块级元素，dl - 和dt dd搭配使用的块级元素，form - 交互表单，h1 - 大标题，hr - 水平分隔线，ol - 排序表单，p - 段落，ul - 非排序列表
互相转换：使用display设置可以使得行内元素拥有块级元素的特性，反之也可以。
如：
<p style="display:inline; text-align:center">我是被设置了内联的块元素p，我现在的表现形式和内联元素一样啦</p>
<span style="display:block; text-align:center">我是被设置了块级元素的span，我现在可以独占一行并且可以设置宽高</span>
display: table-cell ，能把元素当作表格单元来显示，这个非常实用，显示效果也很好，只可惜某些浏览器不够兼容。要注意，和一个合法的<td>元素必须在<table>里一样，
display: table-cell 元素必须作为 display: table 的元素的子元素出现。
--------------------------------------------------------------------------------
现在开始说一下简单的几种基础的居中方式：
1.块中文字水平居中：text-align 用于块级元素，作用在使用它的块元素中的文字或者图片上。使得它们在水平方向上居中。
这个属性只能作用于块元素（或者被CSS控制为块元素的内联元素，但是被控制为内联元素的块元素是不行的）。一句话来说，就是要拥有块元素的特点的那些元素。这个很好理解，居中，肯定是行居中，如果使用它的元素本身不拥有完整的在宽度上的独立空间，它当然没有能力让它内部的文字或者图片居中。（难道要占用别人的地盘里居中，岂不混乱啦）
例子：
<p style="text-align:center">我是正常p,我设置了居中</p>
<span style="display:block; text-align:center">我其实是一个行内元素span哦，我设置了居中，可以居中并且独占一行</span>
<p style="display:inline; text-align:center">能不能再同一行,我是被inline了的p，我设置了居中可是不能居中！</p>
父元素的这个属性对它狼蚁网站SEO优化的子元素也起作用，比如一个div设置了text-align居中，则它内部的文字可以居中，它的子div内部的文字也可以居中。但是子元素中文字的居中，是在子div中居中，而不是对于父div居中。也就是，它里面所有的文字，都会相对于最靠近自己的一层div来实现居中。所以，这个属性不能用于div在父div中的整体居中。（不仅仅是div，所有的表现为块元素的元素）。
狼蚁网站SEO优化的这段代码，外面一个大的蓝色的div，里面一个小的红色的div。外部的div设置了水平居中，按说里面的图片肯定会居中（运行时确实显示居中），
而内部的div只设置了vertical-align，垂直居中（先不管它）。可是因为它父层的text-align对它也有影响，所以运行时，里面的文字会相对于内部div而居中（注意！不是相对于最外面的div)
复制代码
代码如下:<div style="width:500px; height:200px; background-color:#39F; text-align:center">
<img src="dog/134906m121hqwumyw3uudc.jpg" width="96" height="80" />
<div style="width:100px; height:50px; background-color:#F69; display: table-cell;vertical-align:middle">啦啦啦</div>
</div>
运行截图：
这个是块元素对内处理的一个属性，不能把这个块自己在它的父容器中居中，若要实现块在父元素中的居中，可以使用：
2 块元素自身水平居中（确定设置了宽度的块）：margin。这个肯定是接触CSS一开始就知道的了。
一般情况下，可以设置margin:0 auto;这会使这个块级元素在它的父级元素中居中，上下左右都会居中。
如果只要水平居中的话，就设置margin-left:auto;margin-right:auto;
3 块元素自身水平居中（不确定宽度的块）：
在其他的一些文章中，看到有不少方法来介绍不确定宽度的块的居中的。
其实简单点说，不需要这么麻烦。我们可以这样来理解，没有明确设定宽度的block，根据块级元素的性质，它默认是独占一行的，所以这个时候block本身就是浏览器窗口的宽度，就不必要来设置水平居中了。
若是此时对块中的内容进行居中的话：
如果块元素的子元素也为块元素，就对子元素使用margin auto一类的方式就好啦；
如果块级元素的子元素为行内元素，就用我们一开始介绍的text-align也就可以解决；
对于子元素为块元素的，也可以用display设置为inline然后再用text-align。
（这些在本文其他地方也都说过了）
4 vertical-align用于行内元素中的垂直居中
vertical-align，这个可以用的很复杂。看了一些文章和例子，自己也有点小混乱，只说一下最简单的用法：
这个属性用于
1、内联元素（以及被转化为内联元素的块元素）
2 、display设置为table-cell的元素，
在 firefox 和 ie8 下，可以设置块级元素的 display 值为 table-cell，来激活 vertical-align 属性，显示效果和就和表格中的 valign="center" 一样了。但 ie6,7 并不支持。
3、<td><tr>这样的元素
这样的写法：vertical-align:middle;就可以设置文字或者图片的垂直居中。只要具有行内元素的特性的元素使用这个属性，对它的子元素中的文字和图片也是起作用的。但是作用效果为使得文字或者图片相对于紧靠着它们的父元素来进行居中。这个和text-align上面说过的部分是类似的。
5 块级元素中的文字图片垂直居中（针对块的高度确定的，这个是从另一个博客上看到的，真的很实用哦，如果块内只有这些文字的话）
文字在层（块级元素）中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!
复制代码
代码如下:<div style="line-height:500px;height:500;"></div>
6 块级元素中的文字图片垂直居中（块的高度不确定的）
在块的高度不确定的情况下，其实它的高度就是取决于里面内容的高度。如果内部只有文字或者图片的话，那就自然垂直居中了，其实就不必特意要设置。
如果非要设置什么的话，比如希望块大一些，文字在块中垂直居中好看一点，可以设置内边距，如padding-top:20px;padding-bottom:20px；
当然，如果上下内边距设置的不一样，就自然不居中了。
7 块级元素自身的垂直居中
设置块级元素自身在父元素中的垂直居中，可以参照块级元素的水平居中的方法（上面说过），设置外边距即可。如果不想设置水平居中，只要设置上下外边距为auto就好。
也可以采用vertical-align:middle;的方式，但是前提是把display设置为table-cell。这样的话要注意浏览器兼容性问题。
--------------------------------------------------------------------------------
评论中有朋友希望能贴参考文章的地址，现在找了当时看的一些来贴一下，只有一部分，很多是随机看的。是疏忽了，应该当时记下来才是~
http://www.blueidea.com/tech/web/2006/3231.asp 【CSS实现完美垂直居中】
http://www.cnblogs.com/asqq/archive/2012/04/09/2438745.html 【CSS各种居中方法】
http://www.php100.com/html/webkaifa/DIV_CSS/2010/0826/5303.html 【完美解决CSS网页水平居中】
【CSS的各种居中——如何书写高质量代码】
还有很多“百度知道”.....
有的比较复杂的灵活用法就没有写上去，只能保证总结的这些都是用过和试过的，比较常用和基础的，应该是没有问题的。也请大家多多指教呐~
还有利用position的这部分，过几天，再试一试之后再继续做一下笔记~
上一篇：CSS中让DIV居中的代码
下一篇：给DIV添加滚动条的实现代码