CSS中几种居中的方式

最新推荐文章于 2023-03-09 14:41:28 发布

qq_28097119

最新推荐文章于 2023-03-09 14:41:28 发布

阅读量148

点赞数

文章标签：定位 css html html5 css3

本文链接：https://blog.csdn.net/qq_28097119/article/details/109656584

版权

##在css布局中无论是水平居中还是垂直居中都是常用的布局方式今天我们就来聊下常见的居中布局方式

1、transform:translate(-50%,-50%)方式

先看代码

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style type="text/css" media="screen">
		.cdiv{
			background: yellowgreen;
			position: relative;
			width: 100px;
			height: 100px;
		}
		img {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="cdiv">
			<img src="images/search.png" />
		</div>
	</div>
</body>

对齐后的样式

这是我们最常见的定位这种定位的优点是不用关心被定位元素的宽高直接可以定位到父元素的水平和垂直居中的位置

注意要点

元素开启 absolute定位后 img的样式生成块级元素相当于img原来是display:inline 现在变成display:block,被定位元素的left和top要确定为50% 要注意此元素的left和top的50%是根据已经开启了定位的父元素来定位的假如父元素是默认的静态定位即：position:static 这个是不算定位的被定为元素会跳过静态定位的父元素寻找不是静态定位的更高辈分的父元素
为什么要加 transform: translate(-50%, -50%) 这个属性原因是top:50% 和 left:50% 只是把被定为元素的左上角定位到父元素的中点位置 transform: translate(-50%, -50%) 属性的作用是被定位元素的x，y轴向左，向上移动自身的50% 这样就达到了居中的目的了

2、使用margin属性使元素居中

在这里插入图片描述

这是使用absolute和margin属性居中定位的方式

注意要点
1.父元素要position:relative定位
2. img 要用绝对定位 left right top bottom 要全部设成0 这样做的目的是保证img在四个方向上没有定位
也可以说成保证img在四个方向上都有定位向四个方向拉扯然后margin为auto 就可以自动在水平和垂直方向上居中

qq_28097119

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中几种居中的方式

##在css布局中无论是水平居中还是垂直居中都是常用的布局方式今天我们就来聊下常见的居中布局方式1、transform:translate(-50%,-50%)方式先看代码 <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> &
复制链接

扫一扫