一、Html中垂直居中的几个方法

1、利用绝对定位来实现垂直居中

父级元素（相对定位） position: relative;
子级元素（绝对定位） position: absolute;

a.利用transform样式旋转div实现

.content{height: 400px;width: 400px;box-sizing: border-box;border: 1px solid;
}
.box{width: 100px;height: 100px;line-height: 100px;text-align: center;box-sizing: border-box;background-color: #57faff;border: 1px dashed red;
}
.content_1{position: relative;
}
.box_1{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

<div class="content content_1"><div class="box box_1"></div>
</div>

b.利用margin: auto实现

.content_2{position: relative;
}
.box_2{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
}

<div class="content content_2"><div class="box box_2"></div>
</div>

2、flex布局

利用flex弹性布局

.content_3{display: flex;align-items: center; /** 垂直居中 **/justify-content: center; /** 水平居中 **/
}

<div class="content content_3"><div class="box box_3"></div>
</div>

3、table-cell实现水平垂直居中

让标签元素以表格单元格的形式呈现，使元素类似于td标签（ps: 水平居中，需要设置块状元素才能使用，否则无法居中）

.content_4{display: table-cell;vertical-align: middle;text-align: center;
}
.box_4{display: inline-block; /** 设置成行内块元素 **/
}

<div class="content content_4"><div class="box box_4"></div>
</div>

二、方案效果图

三、完成html页面代码

<!DOCTYPE html>
<html><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="title" content="垂直居中方案"><meta name="author" content="cxj"><style>body,html{height: 100%;width: 100%;font-size: 14px;}.main{display: flex;}.plan{margin-left: 20px;}.plan:first-of-type{margin-left: 0;}.title{margin-bottom: 5px;}.content{height: 400px;width: 400px;box-sizing: border-box;border: 1px solid;}.box{width: 100px;height: 100px;line-height: 100px;text-align: center;box-sizing: border-box;background-color: #57faff;border: 1px dashed red;}/** 利用绝对定位,(top:50%;transform:translate(-50%,-50%)) **/.content_1{position: relative;}.box_1{top: 50%;position: absolute;left: 50%;transform: translate(-50%,-50%);}/** 利用绝对定位,(top/bottom/left/right:0;margin:auto;) **/.content_2{position: relative;}.box_2{position: absolute;margin: auto;top: 0;bottom: 0;left: 0;right: 0;}/** flex布局方法 **/.content_3{display: flex;align-items: center; /** 垂直居中 **/justify-content: center; /** 横向居中 **/}/** table-cell实现水平垂直居中: table-cell middle center组合使用 **/.content_4{display: table-cell; /** 只能是块状元素，否则只能垂直居中，无法水平居中 **/vertical-align: middle;text-align: center;}.box_4{display: inline-block; /** 设置成块状元素 **/}</style>
</html>
<body><div class="main"><div class="plan"><div class="title"><div>垂直居中方案一:</div><div>绝对定位 + transform</div></div><div class="content content_1"><div class="box box_1"></div></div></div><div class="plan"><div class="title"><div>垂直居中方案二:</div><div>绝对定位 + margin</div></div><div class="content content_3"><div class="box box_3"></div></div></div><div class="plan"><div class="title"><div>垂直居中方案三:</div><div>flex布局方法</div></div><div class="content content_3"><div class="box box_3"></div></div></div><div class="plan"><div class="title"><div>垂直居中方案四:</div><div>table-cell</div></div><div class="content content_4"><div class="box box_4"></div></div></div></div>
</body>

html垂直居中方案及示例相关推荐

【前端攻略】最全面的水平垂直居中方案与flexbox布局
[前端攻略]最全面的水平垂直居中方案与flexbox布局原文:[前端攻略]最全面的水平垂直居中方案与flexbox布局最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定 ...
三种css垂直居中方案
前言在使用CSS进行页面布局时,垂直居中的实现不像水平居中那么方便,下面分享3种实现垂直居中的方案. 准备以下面html为基础进行扩展,一个div里包含一个img,目的是使图片相对于div垂直居中 ...
php调用打印机,web端调用打印机方案总结(示例代码)
背景新零售业务开始以来,一些线下商品上架售卖的同时,要明确售卖价格,前期人工人肉写标签贴上商品售卖价,容易产生疏忽,导致所标售卖价与收银所收价格不统一,造成顾客疑惑(据说还因为被投诉,上了新闻-_ ...
React-Native组件之Text内文字垂直居中方案
1 style: { 2 height: 100, 3 textAlign: 'center', 4 textAlignVertical: 'center', 5 } 以上方法在Android上显示水 ...
史上最完整的网站运营推广方案样板示例
前言:(策划方案背景环境) 一个网站运营的成功与该网站的网站运营策划有着极为重要的关系. 网站前期的策划方案决定着网站今后的发展.在建立网站前应明确建设网站的目的,确定网站的功能,这个网站能满足哪一些 ...
性能测试基础——性能测试方案（示例）
前面所说的测试分析等准备工作实际上最终目的是制定测试方案,测试方案一般包括: 项目的简要说明.项目系统结构.项目的业务结构.以及项目的性能需求.测试环境数据以及测试策略方法.测试案例.测试人员进度安排 ...
服务器交换机等系统性能测试,性能测试方案（示例）
前面所说的测试分析等准备工作实际上最终目的是制定测试方案,测试方案一般包括: 项目的简要说明.项目系统结构.项目的业务结构.以及项目的性能需求.测试环境数据以及测试策略方法.测试案例.测试人员进度安排 ...
HTML5/CSS3基础——div盒子水平垂直居中的三种方案
HTML5/CSS3基础--div盒子水平垂直居中的三种方案一.基于定位的使div盒子水平居中的三种方式 1.使用top:50% left:50% 以及margin-top 和 margin-lef ...
前端： 42 种前端常用布局方案，值得收藏！
对 CSS 布局掌握程度决定你在Web开发中的开发页面速度.随着Web技术的不断革新,实现各种布局的方式已经多得数不胜数了. 本篇文章总结了四十二种CSS的常见布局,这四十二种布局可以细分为如下几类: ...

html垂直居中方案及示例

一、Html中垂直居中的几个方法

1、利用绝对定位来实现垂直居中

a.利用transform样式旋转div实现

b.利用margin: auto实现

2、flex布局

3、table-cell实现水平垂直居中

二、方案效果图

三、完成html页面代码

html垂直居中方案及示例相关推荐

最新文章

热门文章