css的居中方式

最新推荐文章于 2023-02-12 21:20:52 发布

Haikin Tei

最新推荐文章于 2023-02-12 21:20:52 发布

阅读量854

点赞数

文章标签： css 定位 html5

本文链接：https://blog.csdn.net/qq_42683507/article/details/117922785

版权

CSS居中布局是常见的一个问题，是初级前端需要面对的问题之一。

在了解CSS如何实现居中布局之前，我们先来了解一些概念。

1、行内元素
①和其他元素都在同一行
②高，行高及外边距和内边距部分可以改变
③宽度只与内容有关
④行内元素只能容纳文本或者其他行内元素
⑤常用内联元素：a,img,input,lable,select,span,textarea,font

2、块级元素
①总是在新行上开始，占据一整行
②高度，行高以及外边距和内边距都可控制
③宽度始终与浏览器的宽度一样，与内容无关
④可以容纳行内元素和其他块级元素
⑤常用的块级元素：div,p,table,form,h1,h2,h3,h4,h5,h6,dl,ol,ul,li

了解了行内元素和块级元素的区别后，我们再来看下居中的分类。
居中方式分为三种：水平居中，垂直居中，水平垂直居中。

1.1、块级元素水平居中

利用text-align: center可以实现在块级元素内部的行内元素水平居中。
此方法对行内元素(inline)，行内块(inline-block)，行内表(inline-table)，inline-flex元素水平居中都有效。

		<style>
			
			div{
				text-align: center;
				background-color:skyblue;
			}
		</style>
	</head>
	<body>
		<div>
			这里是块级元素
		</div>
		
	</body>

在这里插入图片描述

1.2、行内元素水平居中

通过把固定宽度的块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。

1.3、多块级元素水平居中
利用inline-block
如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

2.1、单行行内元素垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

2.2、多行元素垂直居中
利用表格布局
利用表布局的vertical-align: middle可以实现子元素的垂直居中。

2.3、块级元素垂直居中
固定高度的块级元素
已知居中元素的高度和宽度，垂直居中问题就很简单。通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可实现垂直居中。

3.1、固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半，使元素水平垂直居中。

3.2、未知宽高元素水平垂直居中
利用2D变换，在水平和垂直方向都反向平移宽高的一半，从而使元素水平垂直居中。

3.3、利用flex布局
利用flex布局，其中justify-content用于设置或检索弹性盒子元素在主轴上方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴方向上的对齐方式。

关注