css居中

最新推荐文章于 2023-03-28 21:19:25 发布

妙团团

最新推荐文章于 2023-03-28 21:19:25 发布

阅读量181

点赞数

分类专栏：前端面试题文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/qq_52440306/article/details/115557627

版权

前端面试题专栏收录该内容

9 篇文章 0 订阅

订阅专栏

css样式居中的方法有很多种

文章目录

一.不脱离文档流

1.text-align:center

text-align:center.可以让行内样式居中，如果元素脱离文档流这种方式就会失效。 ``

			div{
				border:2px solid royalblue;
				width: 200px;
				height: 18.75rem;
				text-align:center;
			}
			
		</style>
	</head>
	<body>
		
		<div>
			明天会更好
			
		</div>

效果
在这里插入图片描述
配合line-height:属性可以让文本水平居中

				line-height:200px;``

在这里插入图片描述

2.margin:auto 属性让块级元素居中显示

脱离文档流的元素依然不起作用

		div{
				border:2px solid royalblue;
				background-color: aqua;
				width: 200px;
				height: 200px;
				line-height:200px;
			}
			
		</style>
	</head>
	<body>
		
		<div>
			
		</div>
	</body>

效果
在这里插入图片描述

3.margin—(top||left）

使用外边距距离也可以让元素居中，margin-top/margin-left。这种方法需要知道元素本身及父元素的大小。用父元素大小减去自身大小，margin-top，margin-left.设置为减去之后的值的一半。
比如父元素高400px，宽500px。自己高100px，宽100px。
设置为 margin-left：(500-100)/2px。margin-top：（400-100）/2px.
代码

			.box{
				position: relative;
				border:2px solid royalblue;
				width: 500px;
				height: 400px;
				margin:100px auto;
				position: relative;
			}
			.content{
				width: 100px;
				height: 100px;
				margin-left:200px;
				margin-top:150px;
				background-color: rosybrown;
			}
		</style>
	</head>
	<body>
		
		<div class='box'>
			
			<div class='content'>
				
				
			</div>
			
			你好，我是妙团团。
		</div>

效果
在这里插入图片描述

二. 脱离文档流方式

1.position:relative-----position:absolute

父元素设置相对定位 position------relative。子元素设置绝对定位position-----absolute。子元素脱离文档流只相对于父元素定位。如果父元素没有设置相对定位，子元素会相对于父元素的父级向上寻找，直到找到有绝对定位的祖先元素，如果不存在已定位的祖先元素。那么会相对于根节点定位，通过设置 top,left ,margin-top,margin-left;可以让脱离文档流的元素居中；

父元素已定位代码如下

		.content{
				position: absolute;
				width: 100px;
				height: 100px;
				background-color: #4169E1;
				top:50%;
				left:50%;
				margin-top:-50px;
				margin-left:-50px;
			}
		</style>
	</head>
	<body>
		<div class='box'>
			<div class='content'>
			</div>
		</div>

结果
在这里插入图片描述

2.position----fixed

固定定位相对于浏览器窗口定位，居中方式与绝对定位的居中方式相同。
代码如下

		position: fixed;

只改动了这一点点，可以看到现在已经相对于浏览器窗口定位了，而不是父元素
需要注意：这种定位方式，实现拖拽效果可能会有影响（这个还需研究研究）
在这里插入图片描述

三.弹性盒型

我们要先使用display:flex属性，让盒子具有弹性布局的属性，align-items属性定义flex子元素在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
justify-content；定义子元素在flex容器的当前主轴(横轴)方向上的对齐方式。

	.box{
				position: relative;
				border:2px solid royalblue;
				width: 500px;
				height: 400px;
				margin:100px auto;
				position: relative;
				display:flex;
				justify-content:center ;
				align-items: center;
			}
			.content{
				width: 100px;
				height: 100px;
				background-color: rosybrown;
			}
		</style>
	</head>
	<body>
		
		<div class='box'>
			
			<div class='content'>
	        </div>
	        <div class='content'>
	        </div>
	        <div class='content'>
	        </div>
		
		</div>

效果
在这里插入图片描述以上就是全部内容

妙团团

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css居中

css样式居中文章目录css样式居中一.不脱离文档流1.text-align:center2.margin:auto 属性让块级元素居中显示二. 脱离文档流方式position:relative-----position:absolute一.不脱离文档流1.text-align:centertext-align:center.可以让行内样式居中，如果元素脱离文档流这种方式就会失效。 `` div{ border:2px solid royalblue; width: 200px
复制链接

扫一扫