居中

最新推荐文章于 2023-07-12 20:22:21 发布

原创最新推荐文章于 2023-07-12 20:22:21 发布 · 308 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS 专栏收录该内容

2 篇文章

订阅专栏

描述

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

代码

<!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不兼容

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

水平垂直居中