Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

HTML 水平居中 垂直居中 垂直水平居中的几种实现方式

最新推荐文章于 2024-06-18 19:41:46 发布
最新推荐文章于 2024-06-18 19:41:46 发布
阅读量10w+ 收藏 101
点赞数 22
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31674679/article/details/81502033
版权

文章目录

水平居中

  1. 方法一：在父容器上定义固定宽度，margin值设成auto
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>helloworld</title>
	</head>
	<style type="text/css">
		.div1{
			background-color: blue;
			width: 200px;
			margin: auto;
		}
		.div2{
			background-color: orangered;
		}
	</style>
	<body>
		<div class="div1">
			<div class="div2">
				你好啊！！！！！！！！！
			</div>
		</div>
	</body>
	
</html>

这里写图片描述

方法2：在子元素中将display设置为inline-block,父元素text-algin设置为center

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>helloworld</title>
	</head>
	<style type="text/css">
		.div1{
			background-color: blue;
			text-align: center;
		}
		.div2{
			display: inline-block;
			background-color: orangered;
		}
	</style>
	<body>
		<div class="div1">
			<div class="div2">
				你好啊！！！！！！！！！
			</div>
		</div>
	</body>
	
</html>

这里写图片描述

垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>helloworld</title>
	</head>
	<style type="text/css">
		.div1{
			width: 200px;
			height: 200px;
			display: table-cell;
    		vertical-align: middle;
    		text-align: center;     
		}
		.div2{
			/*display: inline-block;*/
			background-color: orangered;
		}
	</style>
	<body>
		<div class="div1">
			<div class="div2">
				你好啊！！！！！！！！！
			</div>
		</div>
	</body>
	
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>helloworld</title>
	</head>
	<style type="text/css">
		.div1{
			width: 200px;
			height: 200px;
			display: flex;
    		justify-content:center;
    		align-items:Center;
		}
		.div2{
			/*display: inline-block;*/
			background-color: orangered;
		}
	</style>
	<body>
		<div class="div1">
			<div class="div2">
				你好啊！！！！！！！！！
			</div>
		</div>
	</body>
	
</html>

垂直水平居中

方式1：绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				width: 500px;
				height: 400px;
				background: red;
				margin: 100px;
				//border: 2px;
			}
			.child{
				position: absolute;
				width: 200px;
				height: 150px;
				background: blue;
				margin: 125px 150px;
			}
		</style>
	</head>
	<body>
 
				<div class="box">
				    <div class="child"></div>
				</div>
		
	</body>
</html>

这里写图片描述

方式二 定位+负margin

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
			.child{
				position: fixed;
				width: 200px;
				height: 150px;
				background: blue;
				top:50%;
				left: 50%;
				margin-top: -75px;
				margin-left:-100px ;
				
			}
		</style>
	</head>
	<body>
		 <div class="child"></div>
	</body>
</html>

这里写图片描述

方式3：使用translate实现平移

  下面的transform代码可以更换为transform: translate(-50%,-50%);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
			.child{
				position: fixed;
				width: 200px;
				height: 150px;
				background: blue;
				top:50%;
				left: 50%;
				transform: translate(-100px,-75px);
			}
		</style>
	</head>
	<body>
		 <div class="child"></div>
	</body>
</html>

效果如上图。

方式4：通过设置bottom top left right margin来实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
			.father{
				width: 500px;
				height: 500px;
				background: black;
				position: relative;
			}
			.child{
				position: absolute;
				width: 200px;
				height: 150px;
				background: blue;
				top:0;
				left:0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="child"></div>
		</div>
		 
	</body>
</html>

这里写图片描述

方式5：flex布局

最长使用，设置 display: flex；justify-content: center;align-items: center;三个属性；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style>
	.father {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 500px;
        height: 500px;
        background-color: rgb(197, 34, 34);    
    }
    .child {
        width: 50px;
        height: 70px;
        background-color: rgb(36, 167, 64);
    } 
	</style>
	</head>
	<body>
		<div class="father">
			<div class="child"></div>
		</div>
		 
	</body>
</html>

方式6：使用tablecell

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
	<style>
	  .father {

        display: table-cell;
    	vertical-align: middle;
    	text-align: center;    
        width: 500px;
        height: 500px;
        background-color: rgb(197, 34, 34);
        
    }

    .child {
        display: inline-block;
        width: 50px;
        height: 70px;
        background-color: rgb(36, 167, 64);
    } 
	</style>
	</head>
	<body>
		<div class="father">
			<div class="child"></div>
		</div>
		 
	</body>
</html>

方式7：JS方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    
    .father {  
        width: 500px;
        height: 500px;
        background-color: rgb(197, 34, 34);
    }
    .child {
        width: 50px;
        height: 70px;
        background-color: rgb(28, 150, 123);
    }
</style>

<body>
    <div class="father">
        <div class="child">
        </div>
    </div>
</body>
    <script>
        let father=document.getElementsByClassName('father')[0];
        let child=document.getElementsByClassName('child')[0];
        fatherH=father.clientHeight;
        fatherW=father.clientWidth;
        childW=child.offsetWidth;
        childH=child.offsetHeight;
        child.style.position="absolute";
        child.style.top=(fatherH-childH)/2+'px';
        child.style.left=(fatherW-childW)/2+'px';


    </script>
</html>
Peace_day
关注
  • 22
    点赞
  • 踩
  • 101
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html实现水平垂直居中,HTML技巧篇：实现元素水平与垂直居中的几种方式
weixin_27015733的博客
06-15 2万+
如何使用html+css实现元素的水平与垂直居中效果，这也是我们网页在编码制作中会经常用到的问题。1)单行文本的居中主要实现css代码：水平居中：text-align:center;垂直居中：line-height:XXpx; /*line-height与元素的height的值一致*/我们先来看这样一个例子，加入我们这里有一个div，宽度和高度为300px，背景颜色为黑色，然后在div中有一行简短...
详解html的几种水平垂直居中的方式（基础）
12-29
所以我给大家总结式的列出几种常用的水平垂直居中的方法。 第一种方法 <!--html盒子代码--> <!--水平垂直居中--> <p>d第一种 <!-css样式部分--> .Centered1{ background-color: #800070; ...
CSS 元素垂直居中的 6种方法
热门推荐
wolinxuebin的专栏
05-30 45万+
转自：http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center，块级元素设置其本身的left
HTML中的文本居中
最新发布
qq_42194101的博客
06-18 145
本文将详细介绍如何在HTML中实现文本居中，包括使用不同的HTML标签和CSS属性来达到这一目的。
CSS中实现水平居中、垂直居中的几种方法
listener_life的博客
03-28 2582
CSS中实现水平居中、垂直居中的几种方法
实现div水平垂直居中的几种方式
scry丶坏坏的博客
09-09 811
使div水平垂直居中的几种方式： 1、第一种 父div高度宽度固定，相对定位；子div高度宽度固定，绝对定位。使用top:50%;left:50%;margin-left:-200px;margin-top:-150px;实现水平垂直居中。 缺点就是子div脱离文档流 .my-div{ border:1px solid red; width:400px; height:3...
css实现水平居中垂直居中的几种方式
The_upside_of_down的博客
11-30 985
常用居中方式 水平居中 a:行内元素：text-align:center； 代码： <input type="text" value="这是一个行内元素" style="text-align: center"/> 效果图： 已知宽度的块级元素： b:使用margin+auto来实现水平居中 实现原理：margin: 0 auto：上下边界为0，左右根据宽度自适应。 ...
水平垂直居中的几种常见实现方式
扫地僧
04-12 669
案例布局1 <style tyle='text/css'> .parent { width: 500px; height: 500px; border: 1px solid #ccc; } .child { width: 200px; height: 200px; border: 1px solid #00f; } </style> <...
CSS常用水平垂直居中的几种方法
qq_33721778的博客
12-28 2万+
CSS水平垂直居中一、利用margin:auto二、利用position: absolute三级目录 一、利用margin:auto 元素有宽度和高度时，利用margin:auto设置元素水平垂直居中： HTML代码如下： <div class="div1"> <div class="center"></div> </div> CSS代码如下： .div1 { background-color: #eee; width: 200px; hei
现在常用的几种容器水平垂直居中的方法
知秋
09-17 281
随着 flex 的广泛支持，现在实现水平垂直居中还是挺容易的，下面就来总结下现在常用的几种方式 现在常用的几种容器水平垂直居中的方法 flex+margin flex position+transform html布局+基础样式 <div class="box"> <div class="box-inner"></div> </div> <style> .box{ width: 200px; height: 200px; .
html垂直水平居中代码,CSS实现水平垂直居中的几种方法
weixin_39648824的博客
06-07 335
本篇文章给大家介绍CSS实现水平垂直居中的几种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。水平居中最常用的就是text-align:center; 和 margin:0 auto; 其中text-align:center;是对内部子元素(inline/inline-block)起作用，而margin:0 auto;是对元素自身(block)起作用，具体根据自己的需要适当地...
CSS水平垂直居中的几种方法总结
09-24
主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法，有兴趣的可以了解一下。
CSS3 不定高宽垂直水平居中的几种方式
01-19
这种方式兼容性不好 2、position + transform .son { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } IE9以下不支持transform属性 3、table + table-cell .father { ...
css 水平居中，垂直居中，自适应宽度的代码
09-25
### CSS水平居中与垂直居中及自适应宽度详解 #### 一、宽度自适应的...综上所述，通过合理运用CSS的各种属性和布局技术，我们可以实现元素的水平居中、垂直居中以及自适应宽度，从而创造出更加灵活和美观的网页布局。
元素水平垂直居中的几种方法
01-20
首先，我们来看第一种方法，通过`margin: auto`实现水平居中，但这种方法无法实现垂直居中。示例代码如下： ```css #box1 { width: 300px; height: 300px; border: 1px black solid; } #box2 { width: 100px; ...
防抖与节流 原理及实现
you see see you
03-04 291
防抖：通过setTimeout的方式，在一定的时间间隔内，将多次出发变成一次出发。 节流：减少一段时间的触发频率 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt.
JS基础
you see see you
03-01 198
&&与||返回值 事件传播 捕获阶段+目标阶段+冒泡阶段 event.preventDefault() 和 event.stopPropagation()方法之间有什么区别？ 　　addEventListener方法具有第三个可选参数useCapture，其默认值为false，事件将在冒泡阶段中发生，如果为true，则事件将在捕获阶段中发生。如果单击child元素，它将分别在控制台上打印window，document，html，grandparent和parent，这就是事件捕获。 .
css怎么实现垂直水平居中的几种方式
05-30
在Web开发中，垂直和水平居中是常见的布局需求。以下是几种常用的实现方式： 1. 使用Flexbox布局 Flexbox布局是CSS3中新增的一种布局方式，可以很方便地实现垂直和水平居中。具体实现方式如下： ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 2. 使用position和transform属性 使用position和transform属性也可以实现垂直和水平居中。具体实现方式如下： ```css .container { position: relative; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 在上面的代码中，我们将容器的position属性设置为relative，将要居中的元素的position属性设置为absolute，并设置top、left和transform属性。 3. 使用table和table-cell布局 使用table和table-cell布局也可以实现垂直和水平居中。具体实现方式如下： ```css .container { display: table; } .center { display: table-cell; vertical-align: middle; /* 垂直居中 */ text-align: center; /* 水平居中 */ } ``` 在上面的代码中，我们将容器的display属性设置为table，将要居中的元素的display属性设置为table-cell，并设置vertical-align和text-align属性。 以上是几种常用的实现方式，可以根据具体的需求选择合适的方式实现垂直和水平居中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值