CSS-水平居中、垂直居中、水平垂直居中

Lsnsh 发布于2019-08-02 10:04 / 1668人阅读

摘要：水平居中水平居中可分为行内元素水平居中和块级元素水平居中行内元素水平居中这里行内元素是指文本图像按钮超链接等，只需给父元素设置即可实现。

1、水平居中 水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中

这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。

.center{
        text-align:center;
}
水平居中

1.2 块级元素水平居中

定宽块级元素水平居中
只需给需要居中的块级元素加margin:0 auto即可，但这里需要注意的是，这里块状元素的宽度width值一定要有

  .center{
      width:200px;
      margin:0 auto;
      border:1px solid red;
  }
  水平居中

不定宽块级元素水平居中
不定宽，即块级元素宽度不固定
方法1：设置table

通过给要居中显示的元素，设置display:table，然后设置margin:0 auto来实现

  .center{
      display:table;
      margin:0 auto;
      border:1px solid red;
  }
  水平居中

方法2：设置inline-block（多个块状元素）
子元素设置inline-block，同时父元素设置text-align:center

  .center{
      text-align:center;
  }
  .inlineblock-div{
      display:inline-block;
  }
  
      1
      2

方法3：设置flex布局
只需把要处理的块状元素的父元素设置display:flex,justify-content:center;

  .center{
      display:flex;
      justify-content:center;
  }
  
      1
      2

方法4：position + 负margin；
方法5：position + margin：auto；
方法6：position + transform；

注：这里方法4、5、6同下面垂直居中一样的道理，只不过需要把top/bottom改为left/right，在垂直居中部分会详细讲述。

2、垂直居中 2.1 单行文本垂直居中

设置paddingtop=paddingbottom；或

设置line-height=height；

2.2 多行文本垂直居中

通过设置父元素table，子元素table-cell和vertical-align
vertical-align:middle的意思是把元素放在父元素的中部

2.3 块级元素垂直居中

方法1：flex布局
在需要垂直居中的父元素上，设置display:flex和align-items：center
要求：父元素必须显示设置height值

显示效果：

方法2：利用position和top和负margin（需知宽高）
1、设置元素为absolute/relative/fixed
2、margin=负一半

效果如下：

方法3：利用position和top/bottom和margin:auto（注意不是margin:0 auto）
1、position：absolute/relative/fixed
2、top/bottom：0
3、margin：auto

效果如下：

方法4：利用position和top和transform
transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。

效果如下：

注：

上述的块级垂直居中方法，稍加改动，即可成为块级水平居中方法，如top/bottom换成left/right

transform方法，可用于未知元素大小的居中

3、水平垂直居中

方法1：绝对定位+margin:auto

    div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

方法2：绝对定位+负margin

    div{
        width:200px;
        height: 200px;
        background:green;
        
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }

方法3：绝对定位+transform

    div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:50%;    /* 定位父级的50% */
        top:50%;
        transform: translate(-50%,-50%); /*自己的50% */
    }

方法4：flex布局

   .box{
         height:600px;  
         
         display:flex;
         justify-content:center;  //子元素水平居中
         align-items:center;      //子元素垂直居中
           /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
    }
    .box>div{
        background: green;
        width: 200px;
        height: 200px;
    }

方法5：table-cell实现居中

设置
display:table-cell;
text-align:center;
vertical-align: middle;

GPU云服务器云服务器水平垂直居中垂直居中实现垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52109.html

CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

cc17 2019-08-02 10:11 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

AlienZHOU 2019-08-30 15:53 评论0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

摘要：水平居中水平居中可分为行内元素水平居中和块级元素水平居中行内元素水平居中这里行内元素是指文本图像按钮超链接等，只需给父元素设置即可实现。 1、水平居中水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。 .center{ te...

scwang90 2019-08-30 14:19 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Apollo 2019-08-30 14:15 评论0 收藏0
【第1期】聊聊css居中那点事

摘要：前言居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊居中的那点事。我是水平居中的同样是针对块级元素才有效果。来看代码我是水平居中的必须配合来使用来可以实现居中的效果。方法二我是垂直居中的注意此方法要考虑的兼容性问题。前言：居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊css居中的那点事。我们主要从这几个方面来了解下居中：水平居中垂直居中水平垂直居中水平...

刘永祥 2019-08-30 15:55 评论0 收藏0