CSS 水平居中

zhaofeihao 发布于2019-08-29 15:27 / 2885人阅读

摘要：零散的知识不整理进入自己的知识框架太容易忘，对于脑子里零零散散的整理自勉水平居中块级元素水平居中此居中的方法前提为居中块级元素宽度必须固定才可设置自动计算左右补白可见块的设置为后实现水平居中，但是设置为确并不能垂直居中特点浏览器兼容

零散的知识不整理进入自己的知识框架太容易忘，对于CSS脑子里零零散散的！整理自勉！

水平居中 块级元素水平居中 margin：auto

此居中的方法前提为居中块级元素宽度必须固定才可设置auto自动计算左右补白

   .block1{
        height: 300px;
        width: 600px;
        background: black;
    }
    
    .block2{
        height: 100px;
        width: 100px;
        margin: auto;
        background: red;
    }

可见块2的margin-left,margin-right设置为auto后实现水平居中，但是margin-top,margin-bottom设置为auto确并不能垂直居中！
特点：浏览器兼容性强，但扩展性差，无法自适应未知项情况

text-align:center

text-align 属性规定元素中的文本的水平对齐方式！显然不是用来给块级元素水平居中的，不过可设置块级元素为行内块级元素时便可实现水平居中

 .block1 {
        height: 300px;
        width: 600px;
        background: black;
        text-align: center;
    }
    
    .block2 {
        height: 100px;
        display: inline-block;
        background: red;
    }

    11111111111

特点：扩展性强，但需要额外处理inline-block的浏览器兼容性
注：该种方法可以让display为inline/inline-block/inline-table/inline/flex值的子元素居中

position:absolute

通过设置子元素为绝对定位元素还有left和margin-left的值可以达到居中效果

 .block1 {
        height: 300px;
        width: 600px;
        position: relative;
        background: black;
    }
    
    .block2 {
        height: 100px;
        width: 100px;
        position: absolute;
        left: 50%;
        margin-left: -50px;
        background: red;
    }

特点：必须知道子元素的宽度才能设置左边补白的负值
注：网上有说法可以通过和float来实现不定宽度块级元素居中（还未深究）

CSS3 flex实现水平居中方法

Flex主要用来布局！ Flex布局，可以简便、完整、响应式地实现各种页面布局。后面整理flex布局笔记！

  .block1 {
        height: 300px;
        width: 600px;
        display: flex;
        justify-content: center;
        background: black;
    }
    
    .block2 {
        height: 100px;
        background: red;
    }
  
    1123123

特点：实现便捷，扩展性强但兼容需要考虑

CSS3 width:fit-content

width:fit-content可以实现元素收缩效果的同时，保持原本的block水平状态，于是，就可以直接使用margin:auto实现元素向内自适应同时的居中效果了

  .block1 {
        height: 300px;
        width: 600px;
        background: black;
    }
    
    .block2 {
        height: 100px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        background: red;
    }
 
    1123123

特点：扩展性强，但兼容性差;

float

浮动居中有待好好研究！
特点：兼容性强，扩展性强！但实现原理较复杂

云服务器 GPU云服务器水平居中水平垂直居中水平居中布局 html的水平居中

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

转载请注明本文地址：https://www.ucloud.cn/yun/113331.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.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 评论0 收藏0
【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 评论0 收藏0
css-元素居中

摘要：一水平居中行内元素水平居中使用属性可以实现在行内元素包括在块级父元素水平居中。使用负已知高度宽度使用使用使用三水平垂直居中公共结构块级元素垂直居中。本文重要是汇总了关于水平居中，垂直居中，还有水平垂直居中的各种方法。一、水平居中 1.行内元素水平居中使用text-align:center;属性可以实现在行内元素（包括：inline,inline-block、inline-tabl...

miqt 2019-08-29 18:39 评论0 收藏0
CSS/CSS3 实现居中（水平&垂直）

摘要：，水平居中行内元素把行内元素放在一个属性块元素中，然后设置父层元素属性居中，水平居中块状元素设置外边距，水平居中多个块状元素把块状元素属性，然后设置父层元素属性居中，水平居中多个块状元素布局实现把块状元素的父元素属性和，如下设置， 1，水平居中：行内元素把行内元素放在一个属性块（display：block）元素中，然后设置父层元素属性居中： .test { text-align:ce...

genedna 2019-08-02 15:27 评论0 收藏0