css实现文字或者div盒子水平垂直居中的方法

最新推荐文章于 2024-03-10 20:03:19 发布

小青头

最新推荐文章于 2024-03-10 20:03:19 发布

阅读量1.5w

点赞数 4

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/xgy123xx/article/details/101710181

版权

前端学习专栏收录该内容

23 篇文章 6 订阅

订阅专栏

实现水平垂直居中的方法

文本（文字）内容属于行内元素

行内元素水平垂直居中方法

方式一：

设置文字外层的盒子

text-align:center /*水平居中*/  
height = 100px;  /*垂直居中  */
line-height = 100px;

垂直居中只要保证行高和盒子高度一致即可
代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>行高居中</title>
	<style type="text/css">
        .box{
        	width: 200px;
        	height: 200px;
        	text-align:center;
        	background-color: red;
        	line-height: 200px;
        }	

	</style>
</head>
<body>
<div class="box">
	hello
</div>
</body>
</html>

方式二：转换成单元格

将文字所在的盒子display设置成table-cell

text-align:center 水平居中  
display:table-cell; 垂直居中  
vertical-align:middle;

注意：只有单元格元素才拥有vertical-align属性
代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>垂直居中</title>
	<style type="text/css">
        .box{
        	width: 200px;
        	height: 200px;
        	text-align:center;
        	background-color: red;
        	display: table-cell;
        	vertical-align: middle;
        }
        /*附：单元格居中方法*/
        td{
        	width: 200px;
        	height: 200px;
        	background-color: green;
        	text-align: center;
        }	
	</style>
</head>
<body>
<div class="box">
	hello
</div>
<table>
	<tr><td>123</td></tr>
</table>
</body>
</html>

块级元素水平居中方法

margin:0 auto;
只能设置水平居中，而margin:auto 0 不能设置垂直居中，因为margin垂直塌陷问题

方法一：定位+margin

父级元素设置position:relative;
儿子元素设置

width: 100px;  
height: 100px;  
position:absolute;  
top:50%;  
left:50%;  
margin-top:-50px;  
margin-right:-50px;

只要margin-left为高度的一半，margin-right为宽度的一半即可
代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>定位和margin法盒子居中</title>
	<style type="text/css">
		.one{
			width: 200px;
			height: 200px;
			background-color: red;
			position: relative;
		}
		.two{
			width: 100px;
			height: 100px;
			background-color: green;
			/*给这个盒子定位水平垂直居中*/
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -50px;
			margin-left: -50px;

            /*设置盒子内文字水平，垂直居中*/
			text-align:center;
			line-height: 100px;
		}
	</style>
</head>
<body>
<div class="one">
	<div class="two"><span>你好</span></div>
</div>
</body>
</html>

方式二：定位方法

父级元素设置position:relative;
儿子元素设置

position:absolute;  
top:0;  
bottom:0;  
left:0;  
right:0;  
margin:auto;

这样设置以后，浏览器将自动将上下外边距相同，左右外边距相同，达到垂直居中的效果
代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>纯定位法盒子居中</title>
	<style type="text/css">
		.big{
			width: 200px;
			height: 200px;
			background-color: red;
			position: relative;
		}
		.small{
			width: 50px;
			height: 50px;
			background-color: green;
			position: absolute;
			margin:auto; 
			top: 0;
			bottom: 0;
			left: 0;
            right: 0;
		}
	</style>
</head>
<body>
<div class="big">
	<div class="small"></div>
</div>
</body>
</html>

方式三：单元格方法

利用单元格法
父级元素

display:table-cell;  
text-align:center;  
vertical-align:middle;

子元素
display:inline-table
因为text-align只对行内元素和行内块生效
代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>单元格法盒子居中</title>
	<style type="text/css">
		td{
			width: 200px;
			height: 200px;
			background-color: red;
			text-align: center;
			vertical-align: middle;
		}
		span{
			display: inline-block;
			width: 50px;
			height: 50px;
			line-height: 50px;
			background-color: yellow;
		}
        div.big{
        	width: 200px;
			height: 200px;
			background-color:purple;

			display: table-cell;
			vertical-align: middle;
			text-align: center;
        }
        div.small{
        	width: 50px;
			height: 50px;
			line-height: 50px;
			
			display: inline-block;
			background-color: yellow;
        }


	</style>
</head>
<body>
<table>
	<div class="big">
		<div class="small">
			小盒子
		</div>
	</div>
	<tr>
		<td>
        <span>123</span>
		</td>
	</tr>
</table>
</body>
</html>

小青头

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
css实现文字或者div盒子水平垂直居中的方法

实现水平垂直居中的方法文本（文字）内容属于行内元素行内元素水平垂直居中方法方式一：设置文字外层的盒子text-align:center /*水平居中*/ height = 100px; /*垂直居中 */line-height = 100px; 垂直居中只要保证行高和盒子高度一致即可代码如下：<!DOCTYPE html><html>&...
复制链接

扫一扫