CSS实现元素居中的集中方法

最新推荐文章于 2023-12-14 09:39:24 发布

不流泪的机器猫

最新推荐文章于 2023-12-14 09:39:24 发布

阅读量259

点赞数

文章标签： css3 定位

本文链接：https://blog.csdn.net/qq_40442609/article/details/112197302

版权

CSS实现元素居中的集中方法

1浮动结合margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href='https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.css' rel='stylesheet'>
    <!-- 清除CSS默认样式 -->
    <style>
      div.container{
          border:solid 2px black;
          width:400px;
          height:400px;
          margin-top:100px;
          margin-left:100px; 
          position:relative;
      }
      div.container>div{
           border:solid 2px red;
           width:100px;
           height:100px;
           position:absolute;/*子元素相对父元素进行定位，如果父元素没有相对定位，子元素相对body定位 */
           top:50%;
           left:50%;/*先相对父元素上和左，移动父元素长度的50%;*/
           margin-left:-50px;/*再向上左移动自身长度的一半;*/
           margin-top:-50px;
      }
    </style>
</head>
<body>
    <div class="container">
        <div></div>
    </div>
</body>
</html>

盒子居中

如图实现了内部元素居中，但是随着CSS技术的升级，该方法本人不建议使用

2、弹性布局

  div.container{
          border:solid 2px black;
          margin:10px;
          width:200px;
          height:200px;
          display:flex;
          justify-content: center;
          align-items: center;
      }
      div.container>div{
           border:solid 2px red;
           width:50px;
           height:50px;
      }

利用弹性布局进行居中更简洁，并且其弹性布局一些属性使得页面布局起来更简单快捷，多行布局不如栅格

3栅格居中

      div.container{
          border:solid 2px black;
          margin:10px;
          width:200px;
          height:200px;
          display:grid;
          align-content: center;
          justify-content: center;
      }
      div.container>div{
           border:solid 2px red;
           width:50px;
           height:50px;
      }