利用css使文字或子元素居中常用的几种方式

最新推荐文章于 2022-12-18 18:34:28 发布

必看吧

最新推荐文章于 2022-12-18 18:34:28 发布

阅读量249

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_43665697/article/details/98092875

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.直接设置水平居中和垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				margin: 100px;
				width: 200px;
				height: 200px;
				background-color: #DC143C;
				/* 水平居中 */
				text-align: center;
				/* 垂直居中 值和高度一样 */
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<div >
			居中
		</div>
	</body>
</html>

2.1 利用外边距和flex 居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				
				width: 400px;
				height: 400px;
				background-color: #DC143C;
				display: flex;
 
			}
			#div2{
				width: 100px;
				height: 100px;
				background-color: white;
				margin: auto ;	
			}
		</style>
	</head>
	<body>
		<div id="div1" >
			<div id="div2">
	           
			</div>
		</div>
	</body>
</html>

2.2利用flex布局实现子元素居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1 {
 
				width: 400px;
				height: 400px;
				background-color: #DC143C;
				display: flex;
				/* 水平居中 */
				Justify-content: center;
				/* 垂直居中 */
				align-items: center;
 
			}
 
			#div2 {
				width: 100px;
				height: 100px;
				background-color: white;
 
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
 
			</div>
		</div>
	</body>
</html>

3.利用绝对定位实现居中(注意看注释)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1 {
 
				width: 400px;
				height: 400px;
				background-color: #DC143C;
				/* 注意 使用绝对定位必须保证父元素定位不是默认的 static 
				不然会以body作为父元素 */
				position: relative;
			}
 
			#div2 {
				width: 100px;
				height: 100px;
				background-color: white;
				position: absolute;
				/* 左移父元素的50% 也就是200px */
				left: 50%;
				/* 右移父元素的50% 也就是200px */
				top: 50%;
				/* 因为元素本身也有大小 所以要居中 
				要自身在左移和上移50% 这样才真正的居中 */
				transform: translate(-50%, -50%);
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2"></div>
		</div>
	</body>
</html>

显示效果:

必看吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用css使文字或子元素居中常用的几种方式

1.直接设置水平居中和垂直居中<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ margin: 100px; width: 20...
复制链接

扫一扫