css控制div绝对居中问题

最新推荐文章于 2024-07-18 13:52:01 发布
最新推荐文章于 2024-07-18 13:52:01 发布
阅读量96 收藏
点赞数
分类专栏： DIV+CSS 文章标签： xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/froshloveC/article/details/84057717
版权 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Matching Game </title>
<meta name="generator" content="editplus" />
<meta name="author" content="lijunliang" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
html,body{
	height:100%;
}
.wrapper{
	height:100%;
}
.left{
	width:300px;
	margin-right:-300px;
	background-color:yellow;
	height:100%;
	float:left;
}
.right{
	margin-left:300px;
	background-color:black;
	height:100%;
	position:relative;
}
.centerit{
	height:200px;
	width:300px;
	top:50%;
	left:50%;
	position:absolute;
	background-color:white;
	margin-top:-100px;
	margin-left:-150px;
}
</style>
</head>
<body>
	<div class="wrapper">
		<div class="left"></div>
		<div class="right">
			<div class="centerit">
				<div class="inner">
					i am in the center
				</div>
			</div>
		</div>
	</div>
</body>
</html>
 
froshloveC
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于CSS控制DIV水平居中问题
12-12
关于CSS 控制DIV水平居中问题，我看到很多新人搞不明月。记得第一次看CSS是一个老外写的书，那个里面谈到居中使用。 margin-left:auto;margin-right:auto; 其实等同于： margin:0 auto; 　于是可以使用这种方式，...
css控制div中元素居中的示例
09-25
主要介绍了css控制div中元素居中的示例,需要的朋友可以参考下
css设置div水平居中方法
恒二哥的博客
11-02 4018
2、在父级div元素里设置“text-align: center”样式，在子一级div元素里设置“display: inline-block”样式。子一级元素设置属性：display: inline-block;方式：父级元素设置属性：text-align: center;1、给div元素设置“margin: 0 auto”样式；方式：元素绑定属性：margin: 0 auto;注意：方法1：常用，适用于已知父级元素宽度的情况。
CSS-div垂直居中方法总结
qq_52622178的博客
03-29 4394
【第一种方法】 该方法是通过position定位去实现的，通过将上下左右的偏移值全设为0，再利用margin：auto，让盒子上下，左右宽度相同，将盒子挤到中间。 //css样式 .outer{ width: 500px; height: 500px; background-color: rgb(158, 177, 194); position: relative; } .box
css样式-div居中
7c
08-11 4702
三种方式设置div居中、垂直对齐、变形
CSS样式——div居中方法
热门推荐
诗琪芮的博客
10-21 16万+
1、绝对居中 给div设置样式，div默认显示位置为body的左上方。 width: 400px; height: 300px; background-color: orange; 如下图所示： 首先给div添加绝对定位，并设置上下左右边距为0，然后使用margin: auto;自动居中。 position: absolute; top: 0; bottom:
css让div居中
suxin1234567890的博客
04-20 7007
css让div居中 1.对div使用绝对布局“position:absolute;”； 方法一：对div使用绝对布局position:absolute;并设置top，left，right，bottom的值相等，但不一定都等于0；并且设置margin:auto {position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; } 2.对div使用绝对布局并把top和left的值都设置为50%； 方法二：这个方法要知道div的宽度和高度。对di
css设置div悬浮居中
badaaasss的专栏
02-26 5537
在编程时，我们经常遇到需要点击弹出说明或者详情的情况。这时我们可以使用弹出其他页面，也可以使用设置div悬浮居中来显示。 使浮动的div居中样式 position: absolute;top:50%;left:50%;margin-left:-300px; margin-top:-150px； margin-left:-300px; 这个值是DIV宽度的一半， margin-top:-150...
CSS——div垂直居中及div内文字垂直居中
FHHHC的博客
03-19 5105
　　最近做demo时，经常需要div垂直居中或者让div内文字相对div垂直居中。水平居中比较简单，就不多说了，这里主要记录一下垂直居中的一些方法。 一、div垂直居中的一些方法： 1.当height、width固定大小时， <!DOCTYPE html> <html> <head> <meta charset="utf-8"&...
css设置div元素居中
poker624的博客
02-12 1841
HTML中创建网站时，有时我们需要某些元素垂直对齐在框内。可能是将文本或图像在 div 内部中间对齐，或者垂直对齐。 CSS flexbox垂直居中 div 文本 (推荐) 首先，设置div属性为flex，其次设置子元素align-items: center。 html示例： flexbox垂直居中 div 文本。 css示例： div { display: flex; justify-content: center; /* align horizontal / align-items: cen
CSS设置div标签屏幕居中
w5206666的博客
05-30 1076
CSS设置div标签屏幕居中 html标签 <div class="loading"> <div> <ui-spinner active v-if="flag"></ui-spinner> </div> </div> css样式 .loading { text-align: center; position: absolute; left: 50%; top:
使用CSS实现div居中的多种方法
weixin_55788590的博客
06-22 1万+
假设现在给出这种场景： <div class="parent"> <div class="child"> DEMO </div> </div> 其中在 class=‘child’ 这个 div 中的内容长度是不一定的，现在需要实现这个 div 的居中。 水平居中 1.1 display: inline-block 在块级父容器中让行内元素或者类行内元素居中，只需使用 text-align: center，这种方法可以让 inline/inl.
使用css实现div垂直居中的示例
09-25
本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，元素的位置可以通过设置`position`属性来控制，其主要值有`static`（默认值）、`relative`、`absolute`和`...
DIV+CSS上下左右绝对居中
06-12
在网页设计中，"DIV+CSS上下左右绝对居中"是一个常见的布局需求，尤其是在构建响应式网站时。这个主题涉及到CSS（层叠样式表）的布局技巧，它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...
web前端基础面试85题（一）
柯晓楠
07-18 1151
1、什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
qt练习控件label控件-lineEdit控件样例代码
最新发布
07-30
qt练习控件label控件-lineEdit控件样例代码
【JCR一区级】麻雀搜索算法SSA-CNN-LSTM-Attention故障诊断分类预测【含源码 5689期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
详解MATLAB Simulink通信系统建模与仿真
07-30
第1 章 MATLAB 基础与通信系统仿真 1.1 MATLAB 简介 1.2 MATLAB 程序设计 1.3 通信系统仿真 第2 章 Simulink 仿真基础 2.1 Simulink 简介 2.2 Simulink 工作环境 2.3 Simulink 仿真的基本方法 2.4 创建自己的模块库 2.5 S-函数的编写 第3 章 通信信号与系统分析 3.1 离散信号和系统 3.2 Fourier 分析 3.3 带通信号的低通等效 3.4 随机信号分析 第4 章 信道 4.1 加性高斯白噪声信道 4.2 多径衰落信道 第5 章 模拟调制 5.1 幅度调制 5.2 角度调制 第6 章 数字基带传输 6.1 概述 6.2 二进制基带信号传输 6.3 基带PAM 信号传输 6.4 带限信道的信号传输 第7 章 数字信号载波传输 7.1 概述 7.2 载波幅度调制（PAM） 7.3 载波相位调制（PSK） 7.4 正交幅度调制（QAM） 7.5 载波频率调制（FSK） 第8 章 信道编码和交织 8.1 概述 8.2 线性分组码
SCI一区】淘金算法GRO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5642.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测
css让div始终居中
12-14
以下是三种让div始终居中的方法： 1.使用flex布局 ```css .container { display: flex; justify-content: center; align-items: center; } ``` 2.使用绝对定位和transform属性 ```css .container { position: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值