css 水平垂直居中拾遗

在实际开发中，居中的状况很是常见，几乎存在于天天的开发中，因此借助这篇文章来总结一下水平垂直的方法，但愿对你们有所帮助。

首先约定一下DOM结构：

<div class="parent-dom">
	<span class="child-dom">e1e211</span>
</div>	
复制代码

假定父级的CSS以下：

.parent-dom{
	position: absolute;
	background: rgb(239, 52, 115);
	width: 100vW;
	height: 100vH;
	left: 0;
	top: 0;
	z-index: 999;
}

复制代码

说明：

默认父级相对body绝对定位，而且宽高为屏幕的宽高，这样作的目的：一、让父级元素有宽高，不然无高度没法看出宽高居中效果；二、可是父级宽高未知，毕竟开发中不都是定宽定高的；

好了，预备工做作完了，开始吧

一、使用绝对定位方式

css代码

.child-dom{
    position: absolute;
    width: 50%;
    height: 50%;
    background: #fff;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
复制代码

说明：

首先让其相对其父级绝对定位，假定宽为50%，高为50%；这样宽高也是未知，符合咱们前面的初衷，宽高未知的状况下去设定水平垂直居中；

而后结合：left、right、top、bottom都设定为0，margin设为auto；这样便达到了水平垂直居中

---

二、利用transform

.child-dom{
    position: relative;
    width: 50%;
    height: 50%;
    background: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
复制代码

说明： 首先这里必定要给定一个position值，最好为relative或者absolute,不然浏览器没法计算left,top值；

而后left,top值都设定为50%，偏移量translate的X轴和Y轴都设为-50%，一样能够水平垂直居中

---

三、flex布局

.parent-dom{
	position: absolute;
	display: flex; /*固定值*/ 
	background: rgb(239, 52, 115);
	width: 100vW;
	height: 100vH;
	left: 0;
	top: 0;
	align-items: center; /*固定值*/ 
	justify-content: center; /*固定值*/ 
	z-index: 999;
}
.child-dom{
    position: relative;
    width: 50%;
    height: 50%;
    background: #fff;
}
复制代码

说明：

首先这里主要是靠父级元素来控制，设定父级元素display为flex；algin-items设为center(垂直居中);justify-content设为center(水平居中)

其次子元素，可设flex值或者不设置均可以， 水平垂直居中目的完成

---

四、利用inline-block方式

.parent-dom{
	position: absolute;
	background: rgb(239, 52, 115);
	width: 100vW;
	height: 100vH;
	left: 0;
	top: 0;
	font-size: 0; /*建议设为0*/
	z-index: 999;
}
.parent-dom:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
}
.child-dom{
    position: relative;
    background: #fff;
    width: 50%;
    height: 50%;
    display: inline-block;
    vertical-align: middle;
}
复制代码

说明：

首先设定父级元素text-algin为center(水平居中)；建议这里font-size为0；

而后给父级元素一个伪类after；设定display为inline-block;height为100%；width为0；居中元素display设为inline-block;而后伪类和居中元素vertical-algin都设为middle，便可达到垂直居中的目的，而后这里font-size从新设置一下

---

五、利用table-cell

.parent-dom{
    display: table-cell;
	width: 100vW;
	height: 100vH;
	background: rgb(239, 52, 115);
	text-align: center; 
	vertical-align: middle;
}
.child-dom{
    background: #fff;
	width: 50%;
	height: 25%;
	display: block;
	margin: 0 auto;
}
复制代码

说明：

首先父级display设为table-cell;text-algin为center(若是子元素display为block能够不设置此值)；vertical-align设为middle;达到垂直上居中

其次子元素，建议设置一个display，若是为block，则要加上margin: 0 auto;达到水平上居中

---

总结

第二种方法和第三种方法适合作移动端开发或者兼容性要求不高的开发中，固然，方法确定还有不少，一搜各式各样的居中法，什么6种终极居中法，7种最适合你的居中法，8种绝世居中法，毕竟这是一盘炒剩的菜，你们都有不一样的看法，若是你们都不发表意见去总结，那前端还有什么活力？因此，前端的活力仍是存在的，知识就是这样，你们一块儿参与，才会发展的更好，这门技术才能有活下去的潜力；

---

想要了解更多的前端方面相关的知识， 请搜索关注微信公众号【大前端js】，了解更多前端的硬技术

好了，感谢你们的阅读，同时这篇文章起到抛砖引玉的做用，你们一块儿来讨论本身的水平居中方法，固然，前提是宽高未知哦，再一次感谢你们

原创不易，转载请注明出处，铭感五内