css居中

   水平居中

    1:行内元素居中,在行内元素上一级上面的块元素内添加 text-align:center;

    2:块级元素居中,为块级元素css添加  margin:0 auto; (要设置宽高值)

    3:块级元素居中,使用绝对定位position: absolute;同时设置负边距 margin-left: 负值;

  垂直居中

    1:处理文字居中,方法一就是设置把 line-height设置为您需要的box的大小(盒子的height)可以实现单行文字的垂直居中。

    2:要实现高度不固定的文字垂直居中使用padding就好了。

    3: display:table-cell;vertical-align: middle;即让标签元素以表格单元格的形式呈现,table-cell会被其他一些css属性破坏,比如float和position:absolute等等。且一旦         设置为table-cell,这时margin就不能用了。

    4: 在希望垂直居中的块级元素的父级元素的css中添加  display:flex;align-items:center; 可以实现块级元素的垂直居中。

  同时居中

    1:使用绝对定位和负边距position: absolute; margin-left: 负值(width的一半);margin-top: 负值;

    2: 在希望居中的块级元素的父级元素的css中添加 display:flex;align-items:center实现竖直居中,justify-content:center;实现水平居中。

    3: 父元素中设置display:flex;在子元素中设置margin:auto。

    4:text-align: center; line-height:(heigh的值);单行文字可以。

    5: css3属性 transform:translate(-50%,-50%); 使用这个可以实现自适应居中。

   补充:

    1:css3的transform属性

         transform的含义是:改变,使…变形;转换 。  transform:translate():含义:变动,位移;如下表示向右位移120像素transform:translate(120px,0)

         transform:scale():含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。   transform:skew():含义:倾斜。                      transform:rotate():含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”。

   2:vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom |inherit

baseline:将支持valign特性的对象的内容与基线对齐 

sub:垂直对齐文本的下标

super:垂直对齐文本的上标

top:将支持valign特性的对象的内容与对象顶端对齐

text-top:将支持valign特性的对象的文本与对象顶端对齐

middle:将支持valign特性的对象的内容与对象中部对齐

bottom:将支持valign特性的对象的内容与对象底端对齐

text-bottom:将支持valign特性的对象的文本与对象底端对齐

<percentage>:用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。

<length>:用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。(CSS2)

原文地址:https://www.cnblogs.com/cyjy/p/6158653.html