水平垂直居中

来源：互联网发布：品茗造价软件编辑：程序博客网时间：2024/05/21 15:00

1.法一

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>居中</title>    <style>        .parent{            position: absolute;            height:100%;            width:100%;            background: grey;        }        .child{            height:300px;            width: 200px;            position: relative;            /*position: absolute;也可*/            top:50%;            left:50%;            margin: -150px 0 0 -100px;            /*块内文字水平垂直居中*/            text-align: center;            line-height: 300px;/*与height保持同值*/            background:green;        }    </style></head><body> <div class="parent">     <div class="child">水平、垂直居中</div> </div></body></html>

执行：
这里写图片描述

2.法二

将.child中的margin: -150px 0 0 -100px;
换成transform: translate(-50%,-50%);
transform为CSS3属性，它可以向元素使用2D 或 3D 转换，进行旋转、缩放、移动或倾斜。
translate(x,y)定义了 2D 转换。

3.法三

使用flex

        justify-content:center;定义容器中项目在主轴上（即水平方向上）居中。        align-items:center;定义容器中项目在交叉轴上（即垂直方向上）居中。

        .parent{            position: absolute;            height:100%;            width:100%;            display: flex;            justify-content:center;            align-items:center;            background: grey;        }        .child{            height:300px;            width: 200px;            /*!*块内文字水平垂直居中*!*/            text-align: center;            line-height: 300px;/*与height保持同值*/            background:green;        }

4.法四

使用定位与margin

        .parent{            position: absolute;            height:100%;            width:100%;            background: grey;        }        .child{            height:300px;            width: 200px;            position: absolute;            top: 0;            bottom:0;            right:0;            left:0;;            margin:  auto;            /*!*块内文字水平垂直居中*!*/            text-align: center;            line-height: 300px;/*与height保持同值*/            background:green;        }

1 0