前端技术 手机教程
程序开发 平面动画
系统软件 CMS教程
CMS教程 在线手册
资源下载 网络安全
精准搜索请尝试:精确搜索

position:absolute水平居中的三种方法

2021-08-18 16:41:49 来源:转载 作者:IT零五

方法一(推荐)、是将 potition:absolute 元素的 left 和 right 同时设置为 0,并且设置 margin:0 auto 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>www.02405.com</title>
</head>
<style>
    #root{
        width: 100%;
        height: 100px;
        position: relative;
        background: #eee;
    }
    .block{
        height: 40px;
        width: 200px;
        position: absolute;
        left: 0;
        right:0;
        margin: 0 auto;
        background: #555;
    }
</style>
<body>
    <div id="root">
        <div class="block">www.02405.com</div>
    </div>
</body>
</html>

方法二、将 potition:absolute 元素 的 left 设置为 50%,margin-left 设置为负的父元素的宽度的一半,也就是 -width/2 ,这个的缺点是要知道父元素的确切宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>www.02405.com</title>
</head>
<style>
    #root{
        width: 960px;
        height: 100px;
        position: relative;
        background: #eee;
    }
    .block{
        height: 40px;
        width: 200px;
        position: absolute;
        left: 50%;
        margin-left: -480px;
        background: #555;
    }
</style>
<body>
    <div id="root">
        <div class="block">www.02405.com</div>
    </div>
</body>
</html>

方法三、在 potition:absolute 元素外部套一层 div,对这个 div 设置绝对定位,然后再设置里面的元素 margin:0 auto。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>www.02405.com</title>
</head>
<style>
    #root{
        width: 100%;
        height: 100px;
        position: relative;
    }
    .container{
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 40px;
    }
    .block{
        height: 20px;
        width: 30px;
        position: relative;
        margin: 0 auto;
    }
</style>
<body>
    <div id="root">
        <div class="container">
            <div class="block">www.02405.com</div>
        </div>
    </div>
</body>
</html>

 

本文关键词:居中 position absolute

相关文章

零五网,分享IT知识,国内顶级IT知识门户网站。

Copyright (C) www.02405.com, All Rights Reserved.

零五网 版权所有 辽ICP备13002105号-1