当前位置：首页 > 行业动态 > 正文

html如何上下垂直居中

HTML上下垂直居中的实现方法有以下几种：

1、使用flex布局

2、使用grid布局

3、使用定位和transform属性

4、使用tablecell和verticalalign属性

5、使用lineheight属性

下面分别介绍这几种方法：

1. 使用flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Flex布局上下垂直居中</title>
    <style>
        .container {
            display: flex;
            alignitems: center;
            justifycontent: center;
            height: 100vh; /* 设置容器高度为视口高度 */
        }
    </style>
</head>
<body>
    <div >
        我是垂直居中的内容
    </div>
</body>
</html>

2. 使用grid布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Grid布局上下垂直居中</title>
    <style>
        .container {
            display: grid;
            justifyitems: center;
            alignitems: center;
            height: 100vh; /* 设置容器高度为视口高度 */
        }
    </style>
</head>
<body>
    <div >
        我是垂直居中的内容
    </div>
</body>
</html>

3. 使用定位和transform属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>定位和transform属性上下垂直居中</title>
    <style>
        .container {
            position: relative; /* 设置容器为相对定位 */
            height: 100vh; /* 设置容器高度为视口高度 */
        }
        .center {
            position: absolute; /* 设置内容为绝对定位 */
            top: 50%; /* 距离顶部50% */
            left: 50%; /* 距离左侧50% */
            transform: translate(50%, 50%); /* 向左上移动自身宽高的一半，实现垂直居中 */
        }
    </style>
</head>
<body>
    <div >
        <div >我是垂直居中的内容</div>
    </div>
</body>
</html>

4. 使用tablecell和verticalalign属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>tablecell和verticalalign属性上下垂直居中</title>
    <style>
        .container {
            height: 100vh; /* 设置容器高度为视口高度 */
            display: table; /* 将容器设置为表格 */
        }
        .center {
            display: tablecell; /* 将内容设置为表格单元格 */
            verticalalign: middle; /* 垂直对齐方式为居中 */
        }
    </style>
</head>
<body>
    <div >
        <div >我是垂直居中的内容</div>
    </div>
</body>
</html>
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/301551.html
0

相关文章

随机文章