php垂直居中代码_div标签：水平居中和垂直居中的实现（附代码）

本篇文章给大家带来的内容是关于div标签：水平居中和垂直居中的实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

在前端开发时，经常会遇到需要居中的情形，居中分2种情况，一个是水平居中，一个是垂直居中，总结一下用到的方法。

水平居中实现margin：0 auto

auto表示外边距左右距离相同即可实现水平居中的效果

垂直居中实现

1、最常用到的一种方式是根据偏移量来实现

*{margin: 0;padding: 0;}

.content{

position: relative;

width: 300px;

height: 300px;

background-color: #000;

margin: 300px auto;

}

.beat{

width: 100px;

height: 100px;

background-color: #ff0000;

position: absolute;

left:50%;

top:50%;

margin-top: -50px;

margin-left: -50px;

}

红色方块位于黑色方块的中心位置，实现了垂直居中效果

left,top分别设置50%，红色方块的起始点位于垂直居中的位置，效果如下图：

想要实现方块内部中心点垂直居中，还要加上偏移量，margin-top的值为红色框heigh/2，margin-left的值为红色框width/2。

2、让p块里的多行文字垂直居中，可以用table和table-cell来实现

*{margin: 0;padding: 0;}

.content{

width: 300px;

height: 300px;

background-color: #000;

margin: 300px auto;

color: #fff;

display: table;

text-align: center;

}

.content p{

display: table-cell;

height: 100px;

vertical-align: middle;

}

垂直居中是布局中十分常见的效果之一垂直居中是布局中十分常见的效果之一垂直居中是布局中十分

常见的效果之一垂直居中是布局中十分常见的效果之一

display: table使块状元素成为一个块级表格，display: table-cell;子元素设置成表格单元格，vertical-align: middle;使表格内容居中显示，即可实现垂直居中的效果

php垂直居中代码_div标签：水平居中和垂直居中的实现（附代码）相关推荐

css水平垂直居中_css 如何实现水平居中、垂直居中（超全面）
前言:元素一般分为块级元素和行内元素块级元素可以设置高度,宽度,行内元素则不能,如果非要给行内元素设置宽高,只需要将 display 属性设置为 inline-block 即可一.水平对齐 ...
10行代码带你搞定目标检测（附代码）
来源:大数据文摘本文约2700字,建议阅读5分钟. 本文介绍采用代码搞定目标检测的技术. 计算机视觉是人工智能的一个重要领域,是关于计算机和软件系统的科学,可以对图像和场景进行识别.理解.计算机视觉 ...
html的代码作用域,JavaScript作用域的全面解析（附代码）
本篇文章给大家带来的内容是关于JavaScript作用域的全面解析(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 作用域决定了变量的生命周期和可见性,变量在作用域范围之外是 ...
php轮播效果代码,CSS实现轮播图效果（附代码）
CSS实现轮播图效果(附代码) 理论基础 CSS3 animation 属性和 @keyframes 规则主体思想 1.准备相同大小的多个图片 2.将要展示图片横排放在一个图片容器里面 3.在图片容 ...
在线闹钟html代码复制,如何使用html5时钟实现（附代码）
使用html5下实现的闹钟代码,喜欢的朋友可以参考下. 是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingCont ...
干货 | 手把手教你用115行代码做个数独解析器！（附代码）
来源:大数据文摘本文约4000字,建议阅读8分钟. 本文教你用代码做数独解析器. 你也是数独爱好者吗? Aakash Jhawar和许多人一样,乐于挑战新的难题.上学的时候,他每天早上都要玩数独.长 ...
似然函数代码c语言,从似然函数到EM算法(附代码实现)
1. 什么是EM算法最大期望算法(Expectation-maximization algorithm,又译为期望最大化算法),是在概率模型中寻找参数最大似然估计或者最大后验估计的算法,其中概率模型 ...
python画图代码大全-Python Matplotlib 绘图使用指南（附代码）
雷锋网(公众号:雷锋网)按:本文为雷锋字幕组编译的技术博客,原标题 Matplotlib Plotting Guide, 作者为 Prince Grover. 翻译 | 李振于志鹏整理 | 凡江 ...
播放失败246106异常代码_美的燃气热水器修理分享（附代码解释）
上门检修一台美的强排热水器. 试机检查:打开水流,强排风机虽转,未听到燃气电磁阀吸合和燃气火力声音,出水口也只有冷水流出,几秒后显示E2.查相应的代码解释E2:风压异常或风机故障.但观风机运行速度声音 ...

php垂直居中代码_div标签：水平居中和垂直居中的实现（附代码）

php垂直居中代码_div标签：水平居中和垂直居中的实现（附代码）相关推荐

最新文章

热门文章