子元素在父元素下居中

最新推荐文章于 2023-06-29 20:17:22 发布

伍拾叁

最新推荐文章于 2023-06-29 20:17:22 发布

阅读量269

点赞数

文章标签： css css3

本文链接：https://blog.youkuaiyun.com/m0_37938136/article/details/105947477

版权

子元素水平居中

1.父元素相对，子元素绝对，需要子元素有宽高

left:50%
margin-left:-50%*width

2.子元素设行内,父元素设文本居中

父 text-align:center
子 display:inline或者inline-block

垂直居中

1.同上1，父相子绝，子有宽高，子设left50%，margin-left-50%width

2 用flex布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登陆</title>
    <style type="text/css">
        html{width: 100%;height: 100%;}  /*整个页面的居中*/
        body{
            width: 100%;
            height: 100%;
            display: flex;             /*flex弹性布局*/
            justify-content: center;
            align-items: center;
        }
        #login{
            width: 300px;
            height: 300px;
            border: 1px black solid; 
            display: flex;
            flex-direction: column;        /*元素的排列方向为垂直*/
            justify-content: center;    /*水平居中对齐*/
            align-items: center;        /*垂直居中对齐*/
        }
    </style>
</head>
<body>
    <div id="login">
        <h1>登陆</h1>
        <input type="text"><br>
        <input type="password"><br>
        <button>确定</button>
    </div>
</body>
</html>

登录界面
转载一下：CSS实现垂直居中的几种方法