前端垂直居中

简介:

垂直居中

基本html结构

<div class="out-box align-center">
    <div class="box">相对定位和绝对定位</div>
</div>  

基本css样式

.out-box{
    background: #27AE60;
    height: 200px;    
    border: 1px solid #555;    
    margin-bottom: 20px;
}
.box{
    width: 300px;
    height: 100px;
    background: #555;
}

1. 定位布局

利用relativeabsolute进行布局
###style

 .align-center{
    position: relative;
}
.align-center .box{
    position: absolute;
    margin-left: -150px;
    margin-top: -50px;
    left: 50%;
    top: 50%;            
} 

优点:适合用于长宽固定的情况
缺点:长和宽一旦需要改变需要重置marginleftmargin-top

2. css3属性transform和定位进行布局

style

 .align-center{    
    position: relative;
}    
.align-center .box{
    position: relative;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}

优点:对盒子长宽没有要求,属于百分比布局
缺点:transform属于css3属性,低版本ie不支持

3.table table-cell布局

style

.align-center{    
    display: table;
    width: 100%;
}    
.align-center .box{
    display: table-cell;
    text-align: center;
    vertical-align: middle; 
}

优点:纯table各浏览器不会有兼容问题;内容可自适应;
缺点:不易于扩展,即将淘汰的技术

4.flex布局

style

    .align-center4{    
        display: flex;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
    }    
    .align-center4 .box{}

优点:简单,快速。为了更简单的布局而产生的一种布局技术
缺点:兼容ie9+,需要加前缀

相关文章
|
6月前
|
前端开发 JavaScript UED
【Web 前端】说几个未知宽高元素水平垂直居中方法?
【4月更文挑战第22天】【Web 前端】说几个未知宽高元素水平垂直居中方法?
|
前端开发
前端水平垂直居中实现
前端水平垂直居中实现
|
XML 前端开发 数据格式
前端样式CSS水平垂直居中的十中方法
首先我们先来了解下什么是CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现[HTML](https://baike.baidu.com/item/HTML)([标准通用标记语言](https://baike.baidu.com/item/标准通用标记语言/6805073)的一个应用)或[XML](https://baike.baidu.com/item/XML)(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化 CSS 能够对网页中元素位置的排版进行像素级精
83 0
|
前端开发
前端:水平垂直居中的10种方法
前端:水平垂直居中的10种方法
353 0
前端:水平垂直居中的10种方法
|
14天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
14天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
30 0
|
14天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
14天前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
14天前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。