资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/没错，css居中就是如此的简单！

没错，css居中就是如此的简单！

pkwenda / 2701人阅读

摘要：写在前面居中方案是一个老生常谈的问题，主要包括水平居中和垂直居中，水平居中大家用的比较多，最常用的莫过于方案了，而垂直居中，很多时候会让很多新手头疼。常用居中方案水平解决方案水平居中适用于已经知道宽度，并且其父级宽度不为的元素水平居中。

写在前面

css居中方案是一个老生常谈的问题，主要包括水平居中和垂直居中，水平居中大家用的比较多，最常用的莫过于margin:0 auto方案了，而垂直居中，很多时候会让很多新手头疼。

常用居中方案（水平）

margin：0 auto解决方案 （水平居中）

</>复制代码 
  1. 适用于已经知道宽度，并且其父级宽度不为0的元素水平居中。
</>复制代码 
  3.     
    哈哈哈哈
  5.  
  7. .parent {
  8.     width:800px;
  9. }
  10. .child {
  11.     width:20%;//也可以是固定像素
  12.     margin:0 auto;
  13. }

2.利用text-align:center使行内元素水平居中(水平居中)

</>复制代码 
  3.    哈哈哈哈
  6. div {
  7.     text-align:center
  8. }

3.flex水平居中

</>复制代码 
  3.     
    哈哈哈哈
  6. .parent {
  7.     display:flex;
  8.     justify-content:center
  9. }

4.绝对定位利用负边距居中(已知宽度)

</>复制代码 
  3.     
    哈哈哈哈
  6. .parent {
  7.     position:relative;
  8. }
  9. .child {
  10.     width:500px;
  11.     position: absolute;
  12. }

5.绝对定位不知宽度居中，可以利用css transform属性，也可以利用flex居中

</>复制代码 
  3.     
    哈哈哈哈
  6. .parent {
  7.     position:relative;
  8. }
  9. .child {
  10.     position: absolute;
  11.     left:50%;
  12.     transform:translate(-50%);
  13. }
垂直居中方案

1.不知宽高，兼容性很高的居中方案。

</>复制代码 
  3.     
    哈哈哈哈
  6. .parent {
  7.     position:relative;
  8. }
  9. .child {
  10.   margin: auto;
  11.   position: absolute;
  12.   top: 0; left: 0; bottom: 0; right: 0;
  13. }

2.利用行高进行居中,行高和高度一致

</>复制代码 
  3.     
    哈哈哈哈
  6. .parent {
  7.     height:50px;
  8.     line-height:50px;
  9. }

3.flex方案

</>复制代码 
  3.     
    哈哈哈哈
  6. .parent {
  7.   display: flex;
  8.   justify-content: center;
  9.   align-items: center;
  10. }

4.transform方案

</>复制代码 
  3.     
    哈哈哈哈
  6. .parent {
  7.   position: relative;
  8. }
  9. .child {
  10.   position: absolute;
  11.   top: 50%;
  12.   left: 50%;
  13.   transform: translate(-50%, -50%);
  14. }

5.已知父级高度，利用margin-top进行居中，该方案过于简单，就不贴代码了
6.绝对定位，使用负边距居中

</>复制代码 
  3.     
    哈哈哈哈
  6. .parent {
  7.     position: relative;
  8. }
  9. .child {
  10.   position: absolute;
  11.   width:500px;
  12.   height:500px;
  13.   top: 50%;
  14.   left: 50%;
  15.   margin-top:-250px;
  16.   margin-left:-250px;
  17. }

还有一种是利用table方案居中，我觉得这种方案可能过时了，想了解的话可以自己百度一下

写在最后

本文已经列出了大多情况下都可以解决的居中方案，还有一些比较居中，例如浮动元素居中可以参考绝对定位居中，如果不考虑兼容性的话，flex居中是最方便的方案，大家可以自由的去根据实际情况去选择需要的方案

GPU云服务器 云服务器 html居中css 如此好用的云主机 css简单 简单css

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

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

相关文章

  • 从头开始 — CSS — 垂直居中

    摘要：基于特有的属性拥有内联元素的特性同时可以定义宽高，我们可以设置一个行内块用于定义高度，再让其他内联元素与其对齐，实现垂直居中。如果居中的元素超过了视窗会被裁剪掉。使用时，不仅在水平方向上将元素居中，垂直方向上也是如此。 事实上，每次面试前端必问的问题就是这个。及其常见的需求，看起来似乎非常简单，但是实现起来很费劲，尤其是涉及尺寸不固定的元素。 本篇文章将介绍比较流行的几种方法。 行内块...

    wuaiqiu 评论0 收藏0

  • 从头开始 — CSS — 垂直居中

    摘要：基于特有的属性拥有内联元素的特性同时可以定义宽高，我们可以设置一个行内块用于定义高度，再让其他内联元素与其对齐，实现垂直居中。如果居中的元素超过了视窗会被裁剪掉。使用时，不仅在水平方向上将元素居中，垂直方向上也是如此。 事实上，每次面试前端必问的问题就是这个。及其常见的需求，看起来似乎非常简单，但是实现起来很费劲，尤其是涉及尺寸不固定的元素。 本篇文章将介绍比较流行的几种方法。 行内块...

    NoraXie 评论0 收藏0

  • 老生常谈之CSS的垂直居中

    摘要：在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。虽然没有垂直居中效果，但也是完全可以接受的。的另一个好处在于，它还可以将匿名容器即没有被标签包裹的文本节点垂直居中。 主要摘自：《CSS 揭秘》，强烈推荐的一本书。 44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中 实现垂直居中。——James Anderson(https://twitter.co...

    CompileYouth 评论0 收藏0

  • python

    Python装饰器为什么难理解？ 无论项目中还是面试都离不开装饰器话题，装饰器的强大在于它能够在不修改原有业务逻辑的情况下对代码进行扩展，权限校验、用户认证、日志记录、性能测试、事务处理、缓存等都是装饰器的绝佳应用场景，它能够最大程度地对代码进行复用。 但为什么初学者对装饰器的理解如此困难，我认为本质上是对Py… Python 实现车牌定位及分割 作者用 Python 实现车牌定位及分割的实践。 ...

    chenatu 评论0 收藏0

发表评论

登陆后可评论

0条评论

pkwenda

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<