关于css浮动元素的居中-css教程-PHP中文网

关于css浮动元素的居中

小云云

发布： 2017-12-13 13:10:06

原创

3655人浏览过

本文我们主要和大家介绍关于css浮动元素的居中，居中对于大家来说指的是页面了，此时我们通常使用提50%来实现了，下面来看一个css浮动元素的居中的例子，希望能帮助找到大家。

<script>ec(2);</script>

登录后复制

关于浮动元素的居中，其实不太常用，但为了应付某些奇葩的面试官，也要知道怎么解决这个问题。

贴出一段css代码：

width:50%; height:300px; float:left; margin-left:50%;  position:relative; left:-25%;background-color:#ccc;

登录后复制

要害在于，给一个左边距，然后定位，让left值为p宽度的一半，即可实现。

其实这种方法也是做弹窗，让它位于浏览器中间位置常用的方法：给个左（上）边距，在position个left（top）值。

例子

立即学习“前端免费学习笔记（深入）”；

 <style type="text/css">
  .ps{background:#ccc;width:600px;height:300px;margin:50px auto 0;}
  .ps p{margin:0 auto;background:#000;width:400px;text-align:center;}
  p{float:left;height:100px;width:98px;background:#fff;border:1px solid red;margin:0 auto;}
    </style>
   <body>
  <p class="ps">
  <p>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/sucai/3376">
                            <img src="https://img.php.cn/upload/webpage/000/000/020/175798440366932.jpg" alt="原木风数学元素设计矢量素材">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/sucai/3376">原木风数学元素设计矢量素材</a>
                            <p>原木风数学元素设计矢量素材适用于教育材料（制作儿童学习材料，如数字学习卡片，让儿童在可爱和有趣的环境中学习数字）、活动海报（制作各种涉及数字主题的活动海报，如数学竞赛、数字猜谜游戏等）、产品设计（各种产品设计，如T恤、包包、家居用品等）、广告设计（各种广告宣传材料，如海报、横幅、传单等）等相关设计的AI格式素材。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="原木风数学元素设计矢量素材">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/sucai/3376" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="原木风数学元素设计矢量素材">
                        </a>
                    </div>
                
  <p>p4</p>
  </p>
  </p>
   </body>

登录后复制

我们发现也能够实现居中效果，但是其可扩展性较差，如果删除一个p或者添加一个p，则需要对.ps p这个样式里的width进行修改。