码迷,mamicode.com
首页 > 其他好文 > 详细

盒子绝对定位 position:foxed ; 居中

时间:2017-12-02 11:05:06      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:标签   back   height   lang   ext   title   bsp   lan   样式   

方法1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            width:  100%;
            height: 1600px;
            background-color: #c9c7c7;

        }
        p{
            max-width: 500px;
            width: 100%;
            background: red;
            position: fixed;color: white;
            text-align: center;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>

<p>我是绝对定位 我需要居中</p>

</body>
</html>

方法2  (替换上面style 的p标签的样式      )

p{
            max-width: 500px;
            width: 100%;
            background: red;
            position: fixed;color: white;
            text-align: center;
            left:50%;
            transform: translateX(-50%);

        }

 

盒子绝对定位 position:foxed ; 居中

标签:标签   back   height   lang   ext   title   bsp   lan   样式   

原文地址:http://www.cnblogs.com/aqigogogo/p/7953418.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!