html - 【css】让div居中的方法失效了，我该如何改？（在不用css3和表格的情况下）。谢谢。

Question

尝试这个方法

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

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

这是html

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

这是css

body{background:grey;}
/*主体p居中*/
.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已经省略----*/

Answer 1

It should be a problem with position. The child element should be positioned absolutely relative to the body. If you change the absolute position of the parent element to relative, the offset of the left and top of the child element will be determined according to the relative parent element.

Answer 2

Do you want this effect? ​​Just change it like this

.login-left

{
    float:left;
    width:500px;
    height:480px;
    background:red;
    position: relative;//这是新增的
}

Answer 3

First clear the floating part and then take a look at it. This clearing is wrong. If the child element floats, add clearfix to the parent element instead of adding it to yourself

Answer 4

Those lines of style should be written in the login input