元素垂直居中和水平居中的方法

前言

元素居中一直是css布局中常见的问题

正文

水平居中

内联元素

• 只需把内联元素包裹在块状父元素中，并在父元素css上设置：text-align:center;
• 此方法适用于文字、链接

块级元素

• 宽度一定的块级元素：只需设置左右外边距为auto，即：margin:0 auto;

多个块级元素

• 将要水平排列的块级元素设置display:inline-block;然后在父元素上设置text-align:center;
• 效果和内联元素水平居中一样

Flex布局

• 在父元素上设置：display:flex;justify-content:center;

垂直居中

内联元素

• 父元素高度确定的单行文本，设置：line-height:height;
• 父元素高度确定的多行文本，设置：display:table-cell;vertical-align:middle;

块级元素

• 未设置宽高的：position:absolute;left:50%;top:50%;
• 未设置宽高的：position:fixed;left:50%;top:50%;
• 设置了宽高的：position:absolute;left:50%;top:50%;margin-top:-1/2height;margin-left:-1/2width;
• 设置了宽高的：position:fixed;left:50%;top:50%;margin-top:-1/2height;margin-left:-1/2width;
• 设置了宽高的：position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;
• 设置了宽高的：position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;
• css3新属性：transform:translate(x,y)
• before,after伪元素：（定高不定宽）

QQ--20180502215825

QQ--20180502215825-1

• Flex布局：（定高不定宽）display:flex;align-items:center;