css居中大全（文字居中、块居中、水平居中、垂直居中）

最新推荐文章于 2024-03-09 16:12:39 发布

luanmabug

最新推荐文章于 2024-03-09 16:12:39 发布

阅读量2.1w

点赞数 33

分类专栏： HTML5+CSS 文章标签： github css

本文链接：https://blog.csdn.net/yangyangdt/article/details/121652556

版权

HTML5+CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css居中

一、水平居中

1.块本身水平居中

div{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    margin:auto;
    }
<div>
    我本身水平居中
</div>

div的margin不设值怎么表示：不设值，也是auto
/*给块居中  上20，左右居中，下不设*/
margin:20px auto auto;

2.对块的子内容 text align：center;

text align：center;使用规则

1.只在块元素内部使用，直接用在内联元素上不生效。

#a{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    text-align: center;  正确用法
    }

span{
text-align: center;   错误用法   
}

<div id="a">
	blalala
</div>

<span>balalala</span>

2.会对块元素中的所有内联内容，文本内容和被转换的内联块对齐。

例如b为子块，转成内联块后也会被居中对齐。当然b也可以直接用margin:auto;

3.子块会继承text align：center;使得子块内的内联内容居中显示。

例如b中的文字内容也居中对齐。

<style type="text/css">

			#a{
				width: 400px;
				height: 400px;
				border: 1px solid #000;
				text-align: center;
			}
			
			#b{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				display: inline-block;
			}
			#c{
				width: 10px;
				height: 10px;
				border: 2px solid green;
				
			}
			p{
				border: 1px solid #000;
			}
			
			
		</style>

<div id="a">
    我是文本
    <p>我是p标签的文本</p>
    <div id="b">
        我是b-div转化的内联块	

    </div>

</div>

4.对a块本身不生效，块本身用margin ：auto（水平居中）。

3.display:flex;

display:flex;
justify-content: center;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		p{
			border: 1px solid #000;
			width: 200px;
			display: flex;
			justify-content: center;
		}	
		</style>
	</head>
	<body>
		<p>balala</p>
	</body>
</html>

三、块级元素垂直居中

以下代码子块水平垂直均对齐。

1.verticle-align+lineheight

可使文字也垂直居中。

原理：首先利用text-align+display：inline-block;实现子块的水平居中。

line-height在应用到一个块级元素时，它定义了该元素中基线之间的最小距离。在块级元素上声明line-height会为该块级元素的内容设置一个最小行框高度。

vertical-align 特性值指定了每个行内框的垂直对齐方式。

所以用line-height 代替height，与vertical-align: middle;连用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>居中</title>
		<style type="text/css">
		.father{
            width: 300px;
            line-height: 300px;
            border: 1px solid #000;
            text-align: center;
            
        }
        .son {
            width: 100px;
            /* 行高是可以被继承的，重新设置子元素的行高，否则会继承父元素的行高*/
            line-height: 100px;
            border: 1px solid #000;
            display: inline-block;
            /* middle   把此元素放置在父元素的中部。 */
            vertical-align: middle;     
        }
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son">
			     balalalll
			</div>
		</div>	
		**/
	</body>
</html>

2.display单元格+verticle-align

原理：用display中的表格做，table-cell相当于单元格，把单元格的水平和垂直都居中，子要变成内联块。

.father{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.son{
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    display: inline-block;
}

3.绝对定位

子块固定宽高-绝对定位+margin

原理：父块用相对，子块用绝对定位，top,left均50%，此时可以使子块左顶点垂直居中
要使中心点居中,需改变左顶点的位置向左上移动，为x轴-50,y轴-50，margin可以做


.father{
    width: 500px;
    height: 400px;
    position: relative;
    border: 1px solid greenyellow;
}
.son{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;                      
    left: 50%;
    margin: -50px 0 0 -50px;
    border: 1px solid red;
}

子块固定宽高-绝对定位+margin

原理：固定宽高的垂直居中，儿子定位上右下左都为0，margin居中即可.

.father{
    border: 1px solid greenyellow;
    width: 500px;
    height: 400px;
    position: relative;
    }
.son{
    border: 5px solid red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

不固定宽高绝对定位+transform

原理：不固定宽高的居中，固定也可以，左顶点居中后，用transform的属性

transform需做浏览器兼容

.father{
    border: 1px solid greenyellow;
    width: 300px;
    height: 400px;
    position: relative;
    }
.son{
    border: 1px solid red;
    position: absolute;
    width: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);      ie
    -moz-transform: translate(-50%,-50%);     火狐
    -webkit-transform: translate(-50%,-50%);   chrome、safari
    }

4.弹性布局display:flex;

在伸缩容器上设置侧轴对齐方式align-items: center

IE9-浏览器不支持

.father{
    width:300px;
    height:300px;
    border: 1px solid green;
    display:flex;  /*弹性布局*/
    justify-content:center;
    align-items:center;
}
.son{
    height:100px;
    width:100px;
    border:1px solid red;
}

5.网格布局display：grid;

在网格容器（父）上设置align-items或align-content

在网格项目（子）中设置align-self或者margin: auto 0

IE10-浏览器不支持，hbuider不显示样式，到浏览器中显示。

.father {
    width: 300px;
    height: 300px;
    display: grid;
    border: 1px solid #000;
}

.son {
    width: 100px;
    height: 100px;
    align-self: center;
    border: 1px solid red;
}