网页布局水平垂直技术

最新推荐文章于 2023-10-02 07:49:57 发布

77458

最新推荐文章于 2023-10-02 07:49:57 发布

阅读量990

点赞数

分类专栏： web开发之路网页项目开发学习

本文链接：https://blog.csdn.net/qq_18661257/article/details/50829312

版权

网页项目开发学习同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

web开发之路

14 篇文章 0 订阅

订阅专栏

对于水平垂直居中的总结：

实现提供如下布局代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOCUMENT</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .parBar{
            position:relative;
            width:32em;
            height:32em;
            margin:4em auto;
            border:1px solid red;
        }
        .parBar .subBar{
            width:13em;
            height:13em;
            border:1px solid black;
        }
        
    </style>
</head>
<body>
    <div class="parBar">
        <div class="subBar"></div>
    </div>
</body>
</html>

第一种居中方式：

CSS绝对定位，对子元素增加如下代码：

.align-center{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}

第二种居中方式：

依旧是CSS绝对定位，代码如下：

<span style="font-family:Courier New;">.align-center{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-6.5em;
    margin-left:-6.5em;
}</span>

第三种居中方式：

利用JQ或者JS代码，在将子元素对于这个父类元素的高宽进行居中设置，这是非常简单的数学计算，本处就不再过多提及。

第四种居中方式：

CSS绝对定位和相对位移，其中用到translate属性，如果大家做过3D效果的网页的话，这个东西便是再熟悉不过了。(不需要固定高度)

代码如下：

<span style="font-family:Courier New;">.align-center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
    /*横坐标,纵坐标*/
}</span>

到此，大家可能就注意到了，这几个都包含一个元素设定那就是position:absolute/fixed,问题来了，如果没有这个属性怎么办呢？

第一种方式运用display:table-cell;

网页代码再次进行修改如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOCUMENT</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .parBar{
            position:relative;
            width:32em;
            height:32em;
            margin:4em auto;
            border:1px solid red;
        }
        .parBar .subBar{
             width:13em;
             height:13em;
             border:1px solid black;
         }

        .parBar .sub2Bar{
            width:6em;
            height:6em;
            border:1px solid black;
            margin:auto;
        }
        
    </style>
</head>
<body>
    <div class="parBar ">
        <div class="subBar">
            <div class="sub2Bar"></div>
        </div>
    </div>
</body>
</html>

垂直居中必须注意如下几条：

.align-center{
            display: table-cell;
            vertical-align:middle;
 }

如上align-center样式必须加在父类上，同时他们的子元素想要水平居中的话比如使用margin:auto;属性。

效果如下：

第二种方法：

运用display:-webkit-box

代码如下：

.align-center{
    display: -webkit-box;
    -webkit-pox-pack:center;
    -webkit-box-align:center;
}

此样式的使用和上面那种样式是一样的。

第三种方法：

:after,:before的使用

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOCUMENT</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .parBar{
            position:relative;
            width:32em;
            height:32em;
            margin:4em auto;
            border:1px solid red;
        }
        .parBar .subBar{
             width:13em;
             height:13em;
             border:1px solid black;
             text-align:center;
         }

        .parBar .sub2Bar{
            width:6em;
            height:6em;
            border:1px solid black;
            display: inline-block;
            vertical-align: middle;
        }
        .align-center:before{
            height:100%;
            content:'';
            display: inline-block;
            vertical-align: middle;
        }
        .align-center:after{
            height:100%;
            content:'';
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="parBar">
        <div class="subBar align-center">
            <div class="sub2Bar "></div>
        </div>
    </div>
</body>
</html>

其中.align-center也是针对于父类而言的同时父类必须同时设定:after和:before否则子类元素只是竖直方向居中水平方向是没有居中的，子类元素要居中必须是行内元素display:inline-block;否则子类元素是无法居中的。