水平居中和垂直居中的常用方法

水平居中和垂直居中的常用方法"/>

水平居中和垂直居中的常用方法

水平居中

1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.

2) 若是块级元素, 该元素设置 margin:0 auto即可.

3) 使用flex布局, 可以轻松的实现水平居中, 子元素设置如下:

.son{display: flex;justify-content: center;

4) 使用CSS3中新增的transform属性, 子元素设置如下:

.son{position:absolute;left:50%;transform:translate(-50%,0);
}

5）使用绝对定位方式, 以及left:0;right:0;margin:0 auto; 子元素设置如下:

.son{position:absolute;width:固定;left:0;right:0;margin:0 auto;
}

水平居中 一般情况下 text-align:center,marin:0 auto; 足矣

垂直居中

单行文本

1) 若元素是单行文本, 则可设置 line-height 等于父元素高度

行内块级元素

2) 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央

3) 可用 Flex布局. 父元素做如下设置即可保证子元素垂直居中:

.parent {display: flex;align-items: center;
}

4) 设置父元素相对定位(position:relative), 子元素如下css样式:

.son{position:absolute;top:50%;height:固定;margin-top:-0.5高度;
}