元素居中的几种方法以及各自需要注意的点

问题:怎样实现div元素居中(垂直、水平)?

 
   
让我居中呀!

方法1:绝对定位法(transform属性)

使用css3的transform设置元素进行水平垂直居中,不需要知道元素的宽、高

用绝对定位来实现的垂直居中,取决与元素的宽度和高度,可以用下面这两个公式来计算元素的左边距和上边距:
元素的宽度/2 = 负左边距
元素的高度/2 = 负上边距

#father{
    //假设主框为600*300
    position: relative;     /*很重要*/
    width: 600px;
    height: 300px;
    background-color: blue:
}
#child{
   position: absolute;     /*很重要*/
   /*子元素左上角定位到父级元素的正中间*/
   top: 50%;
   left: 50%;    
   /*子元素相对于自身左移上移到中间,实现居中定位*/ 
   transform: translate(-50%,-50%);   
   background-color: lawngreen;
}

注意点:

(1)上述父级元素和子元素均采用绝对定位 position:absolute; 效果图如下:
(父元素也可以采用 relative)


image

但是:如果子元素采用相对定位:position: relative; 那只能实现垂直居中,效果如下:


image

(父元素没有定位时,子元素采用相对定位)

(2)上述方法利用了CSS3中的 transform:translate(x,y) 属性,这是子元素相对于自身的定位实现的x轴和y轴的偏移,如果子元素没有设置宽和高值的话可以用这个方法实现(做自适应页面的时候用到),如果已知子元素的宽和高,可以用下述方法实现。

方法2:定位法(相对位置)

利用position生成绝对定位的元素进行水平垂直居中,该方法需要知道元素的宽、高


效果如下:

image

方法3:定位法 margin:auto

使用position生成绝对定位与margin:auto结合让元素进行水平垂直居中,改方法需要设置元素的宽、高


image

仅实现水平居中(子元素):margin:0 auto; (当子元素position为非默认及relative时,这种设置会失效)
仅实现垂直居中(子元素):margin:auto 0;
上述文字没有实现居中,可参考方法2中的居中,但是要注意:如

等标签中内的文字内容水平居中:使用{text-align:center}。垂直居中设置该元素的行高等于元素的高。

4. display:table-cell 实现法

display:table-cell 主要针对多行文字内容的垂直居中对齐。

通过display转化成为表格的形式,再采用垂直居中的方法得到需要的结果
display:table 此元素会作为块级表格来显示(类似

),表格前后带有换行符。
display:table-cell 此元素会作为一个表格单元格显示(类似

div {
    display: table-cell;
    width: 200px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #F00;
}

本文章来源于https://blog.csdn.net/chenjuan1993/article/details/82628930

你可能感兴趣的:(元素居中的几种方法以及各自需要注意的点)