元素居中处理

108 阅读1分钟

主要介绍元素垂直的一些技巧,水平同理

1、vertical-align: middle;

前提:父元素display: table-cell; vertical-align: middle;

1.png

2、align-items: center;

前提:父元素display: flex; align-items: center;

2.png

3、align-self: center;

前提:父元素display: flex; 子元素align-self: center;

3.png

4、transform: translateY(-50%)

前提:子元素存在定位,top: 50%; transform: translateY: (-50%);

4.png

5、margin: auto;

前提:子元素相对父元素绝对定位position: absolute; top; 0; bottom: 0; margin: auto;

5.png

6、line-height: xxx;

前提:子元素为单行文本, line-height: xxx; (xxx为父容器height大小)

6.png