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

水平居中

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高度;
}