css水平垂直居中的方式有哪些
这篇文章主要讲解了"css水平垂直居中的方式有哪些"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"css水平垂直居中的方式有哪些"吧！
如无特殊说明，以下示例html均为：
基础样式为：
.md-warp{ width: 400px; height: 300px; max-width: 100%; border: 1px solid #000;}.md-main{ display: block; width: 100px; height: 100px; background: #f00;}水平居中
margin法
需要满足三个条件:
元素定宽
元素为块级元素或行内元素设置display:block
元素的margin-left和margin-right都必须设置为auto
三个条件缺一不可。
demo
.md-main{ margin: 0 auto;}定位法
需要满足三个条件：
元素定宽
元素绝对定位，并设置left:50%
元素负左边距margin-left为宽度的一半
demo1
.md-warp{ position: relative;}.md-main{ position: absolute; left: 50%; margin-left: -50px;}有些时候我们的元素宽度可能不是固定的，不用担心，我们依然可以使用定位法实现水平居中，此时需要用到css3中的transform属性中的translate，可以使元素移动时相对于自身的宽度和高度。
需要注意，这种方法需要IE9+才可以实现。
demo2
.md-warp{ position: relative;}// 注意此时md-main不设置width为100px.md-main{ position: absolute; left: 50%; -webkit-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -o-transform: translate(-50%,0); transform: translate(-50%,0);}文字水平居中
对于单行文字来说，直接使用text-align: center即可。
多行文字可以看作一个块级元素参考margin法和定位法。
垂直居中
定位法
和水平居中类似，只是把left:50%换成了top:50%，负边距和transform属性进行对应更改即可。
优点：能在各浏览器下工作，结构简单明了，不需增加额外的标签。
demo1
.md-warp{ position: relative;}.md-main{ position: absolute; /* 核心 */ top: 50%; margin-top: -50px;}运用css3中的clac()属性能简化部分代码：
.md-warp{ position: relative;}.md-main{ position: absolute; /* 核心 */ top: calc(50% - 50px);}demo2
.md-warp{ position: relative;}.md-main{ position: absolute; top: 50%; // 注意此时md-main不设置height为100px -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -o-transform: translate(0,-50%); transform: translate(0,-50%);}单行文本垂直居中
需要满足两个条件：
元素内容是单行，并且其高度是固定不变的。
将其line-height设置成和height的值一样
这是一段文字div{ width: 400px; height: 300px; border: 1px solid #000;}span{ line-height: 300px;}
以上是一些常规办法，接下来是利用CSS3新特性实现的示例。
视窗单位的解决办法（垂直居中）
如果想避免使用绝对定位，我们仍然可以利用translate方法，其值刚好是元宽度和高度的一半。但是，我们如何不使用top和left将元素从top和left移动50%的偏移量呢？
首先想到的是给margin属性一个百分数，像这样：
.md-main{ margin: 50% auto 0; transform: translateY(-50%);}效果如下所示：
我们发现并没有出现预想的结果，这是因为margin的百分比计算是相对于父容器的width来计算的，甚至包括margin-top和margin-bottom。
我们如果仍然想让元素在视窗中居中，还是有救的。CSS3定义了一种新的单位，称为相对视窗长度单位。
以下摘自w3cplus
vw是相对于视窗的宽度。与你预期刚好相反,1vw相当于视窗宽度的1%，而不是100%
与vw相似的是，1vh相当于视窗高度的1%
如果视窗的宽度小于高度，1vmin等于1vw，反之，如果视窗宽度大于高度，1vmin等于1vh
如果视窗的宽度大于高度，1vmax等于1vw，反之，如果视窗宽度小于高度，1vmax等于1vh
在上个示例的基础上，我们需要给margin设置vh单位:
.md-warp{ position: relative;}.md-main{ position: absolute; margin: 50vh auto 0; transform: translateY(-50%);}注意：这种方法最大的局限是只能适用于元素在视窗中垂直居中，如果是在局部的某个地方就无能为力了。
Flexbox的解决方案
如果不考虑浏览器的兼容性，Flexbox无疑是最好的解决方案，因为它的出现就是为了解决这样的问题。
完成这项工作只需要两个样式，在需要水平垂直居中的父元素上设置display:flex和在水平垂直居中的元素上设置margin:auto。
.md-warp{ display:flex;}.md-main{ margin: auto;}Flexbox的实现文本的水平垂直居中同样很简单。
.md-warp{ display:flex;}.md-main{ display: flex; align-items: center; justify-content: center; margin: auto;}补充：
inline-block配合伪类的解决方案
.md-warp{ font-size: 0;}.md-warp:before{ content:''; display:inline-block; width: 0; height:100%; vertical-align:middle;}.md-main{ display:inline-block; vertical-align:middle; font-size: 14px;}引自未知尺寸元素水平垂直居中实现详解
首先要了解垂直方向的对齐排版需使用 vertical-align ，并且只应用于inline level, inline-block level 及 table-cells 元素上；其次 vertical-align 的对齐就基于每个 line box（行框） 的，简单的说，inline level元素按照 Normal flow 水平排版出一行就会形成一个line box，其高度由内容形成，如果换行，则又是另一个line box，所有一段文本可能会分布在多个line box里，这些不重叠的line box被称作为a vertical stack of line boxes（一个垂直堆叠的线框集合）这些。
换句话说，我们的垂直居中是要在每个line box中进行处理。而上例中我们想让一行文本在名叫demo的高100px的容器里垂直居中，这时有个问题就是demo容器并非该行文本的line box，所以就算定义vertical-laign为middle也无法让该行文本在demo容器中垂直居中。我们知道line box的高度是由内容形成的，这时我们可以额外创建一个与该行文本处于同一line box的元素，同时将新增元素的高度定义为与demo容器相同，此时line box的高度将与demo一致，文本将会在line box内垂直居中，即同样实现了在demo容器中垂直居中。
绝对垂直居中
.md-warp{ position: relative;}.md-main{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}常用在弹出层的定位中。
感谢各位的阅读，以上就是"css水平垂直居中的方式有哪些"的内容了，经过本文的学习后，相信大家对css水平垂直居中的方式有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！
