居中对齐

最新推荐文章于 2024-08-08 11:27:58 发布

ECHO-Debug

最新推荐文章于 2024-08-08 11:27:58 发布

阅读量653

点赞数

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

本文链接：https://blog.csdn.net/weixin_44455764/article/details/109149982

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一学就会的css居中对齐样式

<div class="div1">单行文字垂直居中对齐</div>
<div class="div2">
	<span>多行多行多行多行多行多行文字垂直居中对齐</span>
</div>
<div class="div3">文字水平居中对齐</div>
<div class="div4">
	<div class="div5">块元素水平居中对齐</div>
</div>
<div class="div4" style="position:relative;">
	<div class="div6">块元素水平和垂直居中对齐</div>
</div>

*{
	margin: 0px;
	padding: 0px;
}
div{
	width: 300px;
	height: 100px;
}
.div1{	
	/*单行文本垂直居中*/
	line-height: 100px;
	white-space: nowrap;
	background-color: pink;
}
.div2{
	/*垂直居中的父元素*/
	width: 300px;
	height: 100px;
	display: table;
	background-color: orange;
}
span{
	/*垂直居中的子元素*/
	display: table-cell;
	vertical-align: middle;
}
.div3{
	/*文本水平居中*/
	text-align: center;
	background-color: #926da0;
}
.div4{
	/*居中块元素的父元素*/
	width: 200px;
	height: 200px;
	border: 1px solid red;
	background-color: orange;
}
.div5{
	/*水平居中的子元素*/
	width: 100px;
	height: 100px;
	margin: 0 auto;
	background-color: pink;
}
.div6{
	/*水平和垂直都居中的子元素*/
	width: 100px;
	height: 100px;
	top: 50%;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
	position: absolute;
	background-color: pink;
}