css3 box-pack box-align 居中

最新推荐文章于 2021-08-03 20:23:24 发布

原创最新推荐文章于 2021-08-03 20:23:24 发布 · 401 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

css3 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了在H5页面开发中实现元素水平垂直居中的传统方法及使用display: box的新方法，并通过示例代码展示了两种不同布局方式的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在h5页面开发中遇到了dispaly：box；这样的布局，所以总结了一下

原来水平垂直居中写法为：height=line-height 实现垂直居中 text-align 实现水平居中

现在使用 box-align 实现垂直居中 box-pack 实现水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo1 {
            width: 200px;
            height: 200px;
            border: 1px solid #2195de;
            text-align: center;
            line-height: 200px;
        }

        .demo2 {
            width: 200px;
            height: 200px;
            border: 1px solid #2195de;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;

        }
    </style>
</head>
<body>
<div class="demo1">
    <input type="text" placeholder="坚持着">
</div>
<div class="demo2">
    <input type="text" placeholder="努力着">
</div>
</body>
</html>