CSS3开启绝对定位后实现居中以及弹性布局实现居中

最新推荐文章于 2023-03-09 14:41:28 发布

胖虎Flins

最新推荐文章于 2023-03-09 14:41:28 发布

阅读量425

点赞数

分类专栏： CSS3 文章标签： css3 css flexbox

本文链接：https://blog.csdn.net/zjh0305/article/details/112101027

版权

本文介绍了CSS3中如何通过绝对定位和弹性布局（Flexbox）来实现元素的居中对齐。针对有固定宽度的元素，可以使用CSS的left和margin-left负值配合定位；对于没有固定宽度的元素，可以利用transform的translate属性。此外，还提到了使用Flexbox的justify-content和align-items属性进行水平和垂直居中的方法。

摘要由CSDN通过智能技术生成

CSS开启绝对定位后实现居中
1.在元素有width的情况下
1.1CSS方法：
      #xx{
          width:300px;
          posibiton:absolute;
          left:50%;

          margin-left:-150px;
           };
1.2Auto方法
      #xx{
          width:300px;
          position:absolute;
          left:0;
          top:0;
          right:0;
          bottom:0;

          margin:auto;
           };
2.在元素没有明显width的情况下(获取由子元素撑开的情况下)，都适用
1.1CSS3方法transform
      #xx{

          position:absolute;
          left:50%;
          transform:translate(-50%);
           };
3.使用弹性盒子居中的方法（不考虑浏览器兼容）
1.1justify-content水平居中+align-items垂直居中
      #xx{
          width:300px;
          display:flex;
          justify-content:center;
          align-items:center;
           }
参考地址:
http://www.divcss5.com/css3-style/c57059.shtml
https://blog.csdn.net/variinjson/article/details/52816515