让一个元素水平垂直居中

display:inline;转换为行内元素

display:block;转换为块状元素

display:inline-block;转换为行内块状元素

1.水平居中

对于确定宽度的块级元素

方法一：width和margin实现。

<head>
    <style type="text/css">
       div{width: 80px;margin: 0 auto;}
    </style>
</head>
<body>
    <div>hello</div>
</body>

方法二：绝对定位和left实现。(父级必须设置属性position:relation)

复制代码
<head>
    <style type="text/css">
        body{position:relation}
        div{width: 400px;left:200px;position:absolute}
    </style>
</head>
<body>
    <div>hello</div>
</body>
复制代码

对于宽度未知的块级元素

方法一：table标签和margin实现

<head>
    <style type="text/css">
        div{display: table;margin: 0 auto;}
    </style>
</head>
<body>
    <div>hello</div>
</body>

方法二：绝对定位和transform实现

复制代码
<head>
    <style type="text/css">
        //当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置，translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置
        div{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
    </style>
</head>
<body>
    <div>hello</div>
</body>
复制代码

方法三：flex布局(justify-content: center;属性)

<head>
    <style type="text/css">
        div{display: flex;justify-content: center;}
    </style>
</head>
<body>
    <div>hello</div>
</body>

对于行内块状元素(父级设置text-align: center属性)

复制代码
<head>
    <style type="text/css">
        body{text-align: center}
        div{display:inline-block;}
    </style>
</head>
<body>
    <div>hello</div>
</body>
复制代码

对于行内元素

方法一：为父级添加text-align: center;属性

复制代码
<head>
     <style type="text/css">
         div{text-align: center;}
     </style>
 </head>
 <body>
     <div>
       <span>hello</span>
     </div>
</body>
复制代码

方法二：转化为块级元素

2.垂直居中

对于行内元素

<head>
     <style type="text/css">
         span{line-height: 300px;}
     </style>
 </head>
 <body>
     <span>hello</span>
</body>

对于已知高度的块级元素

弹性布局flex,添加属性height：400px;align-items: center;display: flex;实现垂直居中

对于未知高度的块级元素

table布局，父级添加属性display: table;，然后子级设置vertical-align实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）

　　

posted @   诉诉飞飞  阅读(186)  评论(1)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类
点击右上角即可分享
微信分享提示
SQL AI 助手