浅谈CSS水平居中&垂直居中

最新推荐文章于 2021-08-04 00:44:08 发布

VIP文章筱葭

最新推荐文章于 2021-08-04 00:44:08 发布

阅读量951

点赞数 1

分类专栏： CSS 文章标签： CSS 水平居中垂直居中

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/53514416

版权

1、水平居中：

（1）行内元素

设置父元素：

text-align:center;

<head>
	<style type="text/css">
		#out{
			width:200px;
			height:100px;
			background-color:red;
			text-align:center;
		}
	</style>
</head>
<body>
	<div id="out">
		<span>CSS</span>
	</div>
</body>

（2）确定宽度的块级元素

设置子元素：

width:百分比或数值;

margin:0 auto;

注意：必须设置width，否则margin:0 auto不能实现水平居中。

<head>    
    <style type="text/css">    
        #out{       
            width: 400px;    
            height: 200px;    
            background: red;    
        }    
        #in{    
            width: 50%;    
            height: 50%;  		
            background: yellow;    
            margin:0 auto;     
        }    
    </style>    
</head>    
<body>    
    <div id="out">    
        <div id="in"></div>    
    </div>    
</body>

（3）不确定宽度的块级元素

1）设置父元素和子元素：

设置父元素：

最低0.47元/天解锁文章

筱葭

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
浅谈CSS水平居中&垂直居中

1、水平居中：（1）行内元素设置父元素：text-align:center #out{ width:200px; height:100px; background-color:red; text-align:center; } CSS （2）非行内元素a、设置子元素：widthmargin:auto
复制链接

扫一扫