css对块级、内联元素的水平居中和垂直居中归纳

最新推荐文章于 2023-08-12 22:49:16 发布

浮尘如梦106

最新推荐文章于 2023-08-12 22:49:16 发布

阅读量671

点赞数 1

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/qq_21903407/article/details/115322688

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了CSS中如何实现块级、内联和内联块级元素的水平及垂直居中。通过设置display属性进行元素类型的转换，以及利用text-align、margin、line-height和vertical-align等属性来达到居中效果。同时，还提到了依赖定位的垂直居中方法。

摘要由CSDN通过智能技术生成

css居中分为水平居中和垂直居中

html元素包含内联元素块级元素内联块级元素

块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有： address , blockquote , center , dir , div , dl , fieldset ,
form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes ,
noscript , ol , p , pre , table , ul , li
内联元素主要有： a , abbr , acronym , b , bdo , big , br , cite , code , dfn
, em , font , i , img , input , kbd , label , q , s , samp , select ,
small , span , strike , strong , sub , sup ,textarea , tt , u , var
内联块级元素有：img

CSS中块级、内联、内联块级元素的相互转化：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。主要用的CSS样式有以下三个：
display:block – 显示为块级元素 display:inline – 显示为内联元素
display:inline-block – 显示为内联块级元素，表现为同行显示并可修改宽高内外边距等属性

## css水平居中：

内联元素水平居中：在父级上使用 text-align:center 像a、span元素
内联块级元素水平居中：在父级上使用：text-align:center 像img元素
块级元素水平居中：在自身子级上使用：margin:auto 像div元素

css垂直居中 不依靠设置定位情况下

内联元素垂直居中：在父级上使用 line-height
内联块级元素垂直居中：在父级上使用 line-height 同时自身子级使用： vertical-align:middel;
块级元素垂直居中：在父级上使用line-height 同时自身子级使用：display:inline-block转为内联块级元素和 vertical-align:middle
或者在父级上使用：display:table-cell 和 vertical-align:middle也可以实现垂直居中

css垂直居中 依靠设置定位情况下

在父级上使用相对定位：position:relative; 在子级上使用：position:absolute left:50%
top:50% transform:translate(-50%,-50%)

简单应用：

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
	.box{
	 width:300px;
		height:300px;
		border:1px solid red;
		background-color:purple;
        text-align:center;
       line-height:300px;
	}
	.box div{
		background-color:orange;
       height: 200px;
       width: 200px;
		display:inline-block;
      line-height:200px;
	}
	section{
	      width:150px;
		height:150px;
		background-color:green;
		display:inline-block;
		vertical-align:middle;
		text-align:center;
		line-height:150px;
	}
img {
	vertical-align:middle;
	width:50%;
}
</style>
</head>
<body>


	<div class='box'>
		
<div>
	<section>
	<img src="//static.runoob.com/images/mix/paris.jpg" alt="Paris" style="width:40%">
	</section>
		</div>
	</div>
</body>
</html>

如下图

在这里插入图片描述