ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS3 - 使用margin与理解auto值,做到水平、垂直居中

2021-10-03 23:33:55  阅读:141  来源: 互联网

标签:CSS3 居中 auto 元素 样式表 margin css


参考:css中margin:auto什么意思?margin:auto属性的用法详解

要点:

  • 如果想要利用margin实现水平居中,在css样式表中相应元素的width、left、right都必须有设定值,不得为auto,此时使用margin:auto可以实现水平居中
  • 同理,如果想要利用margin实现垂直居中,在css样式表中相应元素的height、top、bottom都必须有设定值,不得为auto,此时使用margin:auto可以实现垂直居中

auto是做什么的?

  • 定义auto元素,因元素类型和上下文而异。在边距中,auto可以表示两种情况:占用可用空间或0 px。这两个将为元素定义不同的布局。

    “自动”占用可用空间

    这是我们利用auto最常见的用法。通过分配auto元素的左右边距,它们可以平等地占据元素容器中的可用水平空间 - 因此元素将居中。
    但是,这只适用于水平边距,它不适用于浮动和内联元素,并且它本身也不能用于绝对和固定定位元素。

  • 将元素转换为绝对定位只是为了使它可以垂直居中可能不是一个好主意。还有其他选项,如flexbox和CSS变换,也许更加适合。

标签:CSS3,居中,auto,元素,样式表,margin,css
来源: https://blog.csdn.net/weixin_44587107/article/details/120599738

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有