前端居中样式调整方式

最新推荐文章于 2024-04-02 14:52:40 发布

红颜い笑倾城

最新推荐文章于 2024-04-02 14:52:40 发布

阅读量276

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/gp_911014/article/details/119423020

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文详细介绍了网页布局中实现元素居中的四种常见方法：1.使用绝对定位和负margin；2.利用transform属性进行偏移；3.应用flexbox布局；4.通过设置元素的上下左右边距为auto。这些方法在浏览器缩放时仍能保持元素居中显示，适用于不同场景的页面设计需求。

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

效果图如下：

浏览器放大缩小依旧不影响效果。

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .main_dom{
           display: flex;
           justify-content: center;
           align-items: center;
           flex-direction: column;
       }

       /* 1.第一种居中  定位 */
       .div_parent1{
           position: relative;
           width: 200px;
           height: 200px;
           border: 1px solid red;
       }

       .div_son1{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
            width: 100px;
            height: 100px;
            border: 1px solid indigo;
       }

       /* 2.第二种居中  定位 */
       .div_parent2{
           margin-top: 50px;
           position: relative;
           width: 200px;
           height: 200px;
           border: 1px solid purple;
       }

       .div_son2{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            border: 1px solid chocolate;
       }

       /* 3.第三种居中  flex */
       .div_parent3{
           margin-top: 50px;
           display: flex;
           justify-content: center;
           align-items: center;
           width: 200px;
           height: 200px;
           border: 1px solid yellow;
       }

       .div_son3{
            width: 100px;
            height: 100px;
            border: 1px solid purple;
       }

        /* 4.第四种居中 特殊定位 */
        .div_parent4{
           margin-top: 50px;
           position: relative;
           width: 200px;
           height: 200px;
           border: 1px solid blueviolet;
       }

       .div_son4{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            border: 1px solid chocolate;
       }

    </style>
</head>

<body>
     <div class="main_dom">

        <!-- 1.第一种居中  定位-->
        <div class="div_parent1">
            <div class="div_son1"></div>
        </div>
        
          <!-- 2.第二种居中  定位-->
        <div class="div_parent2">
            <div class="div_son2"></div>
        </div>    

        <!-- 3.第三种居中  flex -->
        <div class="div_parent3">
            <div class="div_son3"></div>
        </div>    
        
        <!-- 4.第四种居中 -->
        <div class="div_parent4">
            <div class="div_son4"></div>
        </div>  
     </div>
</body>

</html>

红颜い笑倾城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端居中样式调整方式

效果图如下：浏览器放大缩小依旧不影响效果。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi..
复制链接

扫一扫

专栏目录