元素水平垂直居中的五种方式

最新推荐文章于 2022-06-01 00:00:36 发布

萩萩萩

最新推荐文章于 2022-06-01 00:00:36 发布

阅读量295

点赞数

分类专栏： CSS 文章标签： css布局

本文链接：https://blog.csdn.net/Sodaliy/article/details/79552435

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

页面结构为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
</head>
<body>
    <div class='content'></div>
</body>
</html>

未知元素宽高的情况下：
1.

.content{
       width: 100px;
       height: 100px;
       background-color: rebeccapurple;
       position: absolute;
       margin: auto;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
   }

.content{
        width: 100px;
        height: 100px;
        background-color: rebeccapurple;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50% );
    }

知道元素的宽高

.content{
        width: 100px;
        height: 100px;
        background-color: rebeccapurple;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }

知道容器的宽高
1.

<!-- 改变页面结构 -->
<div class='box'>
    <div class='content'></div>
</div>

.box {
        width: 100%;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        background-color: antiquewhite;
    }
.content{
       width: 100px;
       height: 100px;
       background-color: rebeccapurple;
    }

<!-- 改变页面结构 -->
<div class='box'>
    <div class='div-table'>
        <div class='content'></div>
    </div>
</div>

.box {
        width: 100%;
        height: 200px;
        display: table;
        background-color: antiquewhite;
     }
.div-table {
    display: table-cell;
    vertical-align: middle;
 }
.content {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: rebeccapurple;
 }

萩萩萩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素水平垂直居中的五种方式

页面结构为：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>水平垂直居中</title></head><body> <div class='content'></div></body></html>未知元素宽高的情况下： 1..content{ width: 1
复制链接

扫一扫

专栏目录