水平垂直居中css4种方法,Css水平垂直居中

1.最简单

margin: 0 auto
line-height等于height

.outer { width: 200px; padding: 200px; background-color: pink; } .inner { width: 100px; height: 100px; background-color: skyblue; margin: 0 auto; line-height: 100px; text-align: center; }

2.绝对定位的几种方式

2.1 absolute + 负 margin

.outer { position: relative;}.inner { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; /*需要inner元素的宽高*/}

2.2 absolute + transform

.outer { position: relative;}.inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /*css3里translate里的%移动距离是盒子自身的宽度和高度来对可以不知道元素的宽高*/}

2.3 absolute + calc

.outer { position: relative;}.inner { position: absolute; left: calc(50% - 50px); top: calc(50% - 50px); /*需要inner元素的宽高calc()函数可以使用数字属性值来执行加、减、乘、除，四则运算*/}

2.4 absolute + margin: auto

.outer { position: relative;}.inner { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; /* top bottom left right 值相等即可 */}

此时设置 margin: auto;

意味着把剩余的空间分配给 margin，并且左右均分，

所以就实现了水平居中，垂直方向同理。

副作用:
left: 0; right: 0; 相当于 width: 100%;
top: 0; bottom: 0; 相当于 height: 100%;
缺点：需要固定居中元素的宽高，否则其宽高会被设为 100%

4.flex布局
写法1

.outer { display: flex; /*使子项目水平居中*/ justify-content: center; /*使子项目垂直居中*/ align-items: center; }

写法2

.outer { display: flex;}.inner { margin: auto;}

5：grid布局

.outer { display: grid;}.inner { justify-self: center; /* 水平居中 */ align-self: center; /* 垂直居中 */} .outer { display: grid;}.inner { margin: auto;}