CSS之垂直居中

在css里面如果我们想对行内元素进行水平居中其实是很简单的只要对它的父元素应用text-align就ok了,如果是块级元素就对它本身应用margin:auto;但是如果想对一个元素进行垂直居中怎么办呢？

    它看似很简单其实想做好还是需要好好思考的，那么今天我就带大家来好好的分析一下。

第一种方式就是基于绝对定位的方案

div{

position:absolute;

top:50%;

left:50%;

margin-top:-20px;

margin-left:-30px;

width:60px;

height:40px;

}

这段代码的意思大家应该一看就能看的懂，我们来讲一些省代码的方法

div{

position:absolute;

top:calc(50%  - 40px);//这里注意符号两边有空格，这个一定要加上。

left:(50% - 60px);

width:60px;

height:40px;

}

但是以上这两种方法呢都是需要内部的div有固定的宽度与高度，但是好多时候我们需要内部元素可以根据内容只适应呢，这个时候百分比就用上了，那么我们怎么用呢？看下面这段代码

div{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%)

}

其实有时候我们并不想使用绝对定位因为这样可能会影响布局，那么我们应该怎么办呢

div{

width：60px;

padding:10px 15px;

margin:50% auto 0;//这里我们引进一个视口宽度的概念vh 1vh = 视口的1%，我们也可以改成margin：50vh auto 0；这种方式会更加友好

transform:translateY(-50%)

}

以上这个方法近乎完美希望大家可以认真揣摩仔细分析有什么不懂的可以给我留言。