CSS居中方法总结

ralap 发布于2019-08-30 13:07 / 2746人阅读

摘要：此时检查元素即可即可实现内层的实现了居中这种方式是最为我们熟知的，其缺点是需要设置子元素的宽度。交叉轴居中当设置了属性时，主轴的方向会改变。垂直居中实现方案用的属性，以及定位，与上面的水平居中类似，只是改为即可。

水平居中实现方案 确定宽度的元素水平居中

1.我们可以通过给该元素的父级设置margin: 0 auto的方式来实现。
HTML:

CSS:

    .child {
      width: 200px;
      margin: 0 auto;
    }

此时检查元素即可即可实现内层的div实现了居中,这种方式是最为我们熟知的，其缺点是需要设置子元素的宽度。
2.通过position定位
HTML:

  
    
      center

CSS:

   div {
      float: left;
      width: 100%;
      position: relative;
    }
    ul {
      position: absolute;
      left: 50%;
      width: 200px;
      margin-left: -100px;
    }

不确定宽度的元素居中

1.给子元素设置display: inline-black,父元素设置text-align: center。
HTML:

  
    
      center

CSS:

    div {
      text-align: center;
    }
    p {
      display: inline-block;
    }

2.当元素被设置float的时候,它的宽度就会被其内容撑开，然后通过positon定位来实现横向居中。
HTML:

  
    
        center

CSS:

    div {
      float: left;
      width: 100%;
      position: relative;
    }
    ul {
      position: relative;
      left: 50%;
      float: left;
    }
    li {
      float: left;
      position: relative;
      right: 50%;
      display: block;
    }

3.flex布局， justify-content:center;主轴居中。align-items:center;交叉轴居中；当设置了flex-direction属性时，主轴的方向会改变。
4.css width: fit-content属性。
5.用css3的transform
HTML:


    
      center

CSS:

    div {
      position: relative;
    }
    .test {
      position: relative;
      left: 50%;
      float: left;
      transform: translateX(-50%);
    }

总结一下起来也就是两种方式，其中有比较直接的方式比如，margin: 0 auto，虽然这种方式的兼容性很好，没有副作用，但是这种方式最主要的缺陷是只适用于子元素宽度固定的情况。或者用css3的固有属性flex布局或者 width: fix-content这种方式实现起来简单直接，但在处理一些旧版本的浏览器时，存在很严重的兼容性问题。还有就是间接的实现方式通过position定位，具体思想主要是子元素先移动到父元素二分之一的位置，relative，或者absoulte都可以实现，然后在将子元素向左移动自身二分之一的位置，这种方式有广泛的适用性，但是思路可能比较复杂。

垂直居中实现方案

1.用css3的transform属性，以及postion定位，与上面的水平居中类似，只是改为top:50%,translateY(-50%)即可。
2.设置父元素display: table;子元素dispaly: table-cell,vertical-align: middle;
3.绝对定位
HTML:

  
    
      nnnnnnn

CSS:

    .parent {
      position: relative;
      height: 400px;
    }
    .child {
      margin: auto;
      height: 200px;
      position: absolute;
      top:0;
      bottom: 0;
    }

4.单行文本时可以设置height与line－height相同实现文字居中。
5.外边距margin取负数，大小为width/height的一半，再加上top: 50%; left: 50%;

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

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

前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
css居中总结

摘要：前言一直有个想法要把各种居中的方法总结一下，但还是一直没有时间去整理。最近刚好在做样式重构的项目，顺便把一下自己有用过的或积累的居中方法给总结一下。又必须有个父级对其进行设置居中。前言一直有个想法要把各种居中的方法总结一下，但还是一直没有时间去整理。最近刚好在做样式重构的项目，顺便把一下自己有用过的或积累的居中方法给总结一下。水平居中行内元素水平居中行内元素的居中比较简单，直...

gxyz 2019-08-30 15:55 评论0 收藏0
对css居中的一点总结

摘要：为了更好的加深对居中的理解，搜集和阅读相关资料，发现不错的文章将其整理出来。在学习前端的过程中，发现元素和文本的水平居中和垂直居中，是经常会出现的问题，在实际工作中也会经常碰到。居中的技巧有很多，但在编写代码的过程中，发现有时候技巧管用，有时候不管用，于是就将每个知道的方案都试一遍，找到合适的。这种情况究其原因是对居中的认识不够深入，只是停留在实现需求的水平上。为了更好的加深对居中的...

BenCHou 2019-08-29 11:17 评论0 收藏0
垂直居中相关知识总结

摘要：垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在上提问了个问题关于垂直居中，大家有没有什么比较好的建议。垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在SF上提问了个问题CSS关于垂直居中，大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助，前辈们给的答案都非常多也各式各样，我觉得有必要把大家的回答总结一下。方法总结一、绝对定...

Labradors 2019-08-19 17:31 评论0 收藏0