上中下左右居中css,css上下左右居中

写在前面

有了、flex后，水平竖直居中已经很容易了，比如万能的：

;

;;;;

/*1.内容左上角居中*/

%;%;

/*2.负半宽高把内容挪回来*/

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

关键是利用transform百分比相对自身宽高计算的特性，如果环境不支持transform的话，就需要用一些比较老，但很精妙的技巧了

margin居中

一个特征明显的方法：

position:absolute;

top:0;bottom:0;left:0;right:0;

/*1.要求自身内容相对包含块居中*/

margin:auto;

/*2.给出自身宽高计算方式*/

width:100px;height:100px;

原理

关键是利用margin的计算规则：

left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right=包含块的宽度top+margin-top+border-top-width+padding-top+height+padding-bottom+border-bottom-width+margin-bottom+bottom=包含块的高度

(摘自10.3.7绝对定位的不可替换元素、10.6.4绝对定位的不可替换元素)

margin居中，就是要给上面的方程加上限制条件：

margin-top===margin-bottommargin-left===margin-right

这是用margin实现居中的核心

CSS里2个步骤实际意义如下：