【css】让div居中的方法失效了,我该如何改?(在不用css3和表格的情况下)。谢谢。 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

【css】让div居中的方法失效了,我该如何改?(在不用css3和表格的情况下)。谢谢。

杨冬芳 2016-06-21 14:15:14 994

尝试这个方法

    position:absolute;
    top:50%;
    left:50%;
    margin-top:-260px;
    margin-left:-375px;

让div居中时,最外层的div(login-main)实现了居中,但是当我让里层的div(login-input)也相对于其父元素居中时这个方法却不行了,直接对着最外层div居中了。请问为什么?是不是因为他的父元素浮动了?可是加了clearfix也没用啊?我该如何改?谢谢。

这是html

  <div class='login-main'>
    <div class='login-left clearfix'>
        <div class='login-form'>
            <div class='login-input'></div>
            <div class='login-input'></div>
            <div class='login-input'></div>
            <div class='login-input'></div>
            <div class='login-input'></div>
            <div class='login-input'></div>
        </div>
    </div>
</div>

这是css

body{background:grey;}
/*主体div居中*/
.login-main
    {
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-260px;
        margin-left:-375px;
        width:750px;
        height:520px;
        background:white;
    }

/*注册功能区*/
.login-left
    {
        float:left;
        width:500px;
        height:480px;
        background:red;
    }

/*注册form*/
.login-form
    {
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-180px;
        margin-left:-230px;
        width:460px;
        height:360px;
        clear:both;
    }

/*登录等按钮区*/
.login-input
    {
        width:460px;
        height:60px;
        background:blue;
    }

/*-----clearfix已经省略----*/

前端开发
分享到
取消 提交回答
全部回答(2)
  • 景凌凯
    2019-07-17 19:44:52

    定位是相对于距离自己最近的非static定位的祖先元素,楼上说的方法就可以

    0 0
  • 杨冬芳
    2019-07-17 19:44:52

    应该是position的问题吧,子元素还是相对于body就行了绝对定位,你把父元素的absolute换成relative,子元素的left和top的偏移就会根据有relative的父元素决定。

    0 0
添加回答

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程