垂直水平居中技巧整理

垂直水平居中整理

垂直水平居中分行内元素和块级元素,记载自己做过的。

1. 行内元素的居中

1.1 水平居中

1. text-align:center

1.2 垂直居中

1. 让行内元素的line-height=父元素的height
2. 表格布局法

.container{
  display:table;
}
.container .div {
  display:table-cell;
  verticle-align: middle;
}

2. 块级元素的居中

2.1 水平居中

有宽度的div水平居中

margin:0 auto
width: 300px // 必须有宽度

2.2 垂直居中

1. 绝对定位法

// 已知宽高
position: absolute
top: 50%
left: 50%
width: 300px
height:300px
// 设置margin为自身宽高的一半
margin-left: -150px
margin-top: -150px

// 未知宽高
position:absolute
top: 50%
left: 50%
transform: translate3d(-50%,-50%,0) // transform是相对自身平移,但是这个属性有浏览器兼容问题