居中

来源：互联网发布：华为网络在线客服编辑：程序博客网时间：2024/04/30 18:45

描述

元素的水平居中、垂直居中、水平垂直居中

代码

<!DOCTYPEhtml><htmllang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .container{            width: 500px;            height: 300px;            background-color: #f0f0f0;        }        .item{            width: 100px;            height: 100px;            background-color: #ccc;        }    </style></head><body><divclass="container">    <div class="item"></div></div></body></html>

水平居中

方法1：父盒子display:flex;justify-content:center;IE678不兼容。

方法2：父盒子text-align:center; 子盒子display:inline-block;IE678兼容

方法3：父盒子position::relative;子盒子position:absolute;left: 50%;transform:translateX(-50%);IE678不兼容

方法4：子盒子display:table;margin: 0 auto;IE678不兼容

文字水平居中：父盒子text-align:center;

垂直居中

方法1：父盒子display:flex;align-item:center;IE678不兼容。

方法2：父盒子position:relative;子盒子position:absolute;top: 50%;transform: translateY(-50%);IE678不兼容

方法3：父盒子display:table-cell;vertical-align:middle;IE678不兼容

文字垂直居中：文字行高设置为和父盒子一样的高度

水平垂直居中

方法1：父盒子display: flex;justify-content: center;align-items: center;

方法2：父盒子position: relative;子盒子position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);

0 0