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

最新推荐文章于 2017-12-02 20:15:47 发布

筱葭

最新推荐文章于 2017-12-02 20:15:47 发布

阅读量993

点赞数 1

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

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

版权

本文详细介绍了如何使用CSS实现水平居中、垂直居中以及水平垂直居中，包括对行内元素、块级元素、不确定宽度的元素、在浏览器窗口及父元素中的居中方法，涉及到text-align、margin、display、position、flex布局和transform等技巧。

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

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）设置父元素和子元素：

设置父元素：