css 水平垂直居中的几种常见方式

最新推荐文章于 2024-06-23 16:20:36 发布

白日梦想jun

最新推荐文章于 2024-06-23 16:20:36 发布

阅读量977

点赞数

分类专栏： HTML&&CSS 文章标签：垂直水平居中 css flex嵌套使用

本文链接：https://blog.csdn.net/oiu1010110/article/details/53192738

版权

HTML&&CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

下面是几种常见的水平垂直居中方式，可在不同情形下方便采用不同的方式

html

	<body>
		<div class="box">
			<div class="content"></div>
		</div>
	</body>

共同的css

		.content{
			width: 50%;
			height: 50%;
			margin: 0 auto;
			background-color: tomato;
		}

1.最简单的margin:auto水平居中

这里box里的overflow:hidden的作用及具体原因见 http://blog.csdn.net/oiu1010110/article/details/53192048

        .box{
            width: 400px;
            height: 400px;
            margin: 50px auto;
            background-color: palegreen;
            overflow: hidden;/*这里是简单的防止边界叠加，若不加，box的margin-top将变成70px*/
            /*padding-top: 1px;*/
            /*border: 1px solid transparent;*/
            /*float: left;*/
        }
        .content{
            width: 50%;
            height: 50%;
            margin: 70px auto;
            background-color: tomato;
        }

2.absolute+margin 水平垂直居中

		.box {
			width: 400px;
			height: 400px;
			margin: 50px auto;
			background-color: palegreen;
			position: relative;
		}
		.content{
			width: 80%;/*宽高可以随便变*/
			height: 80%;
			margin: auto; /*水平居中*/
			position: absolute;/*垂直居中*/
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			background-color: tomato;
		}

3. left:50%+top:50% margin为自己宽高的一半垂直水平居中

情况1：

        .box{
            width: 400px;
            height: 400px;
            margin: 50px auto;
            background-color: palegreen;
            overflow: hidden;/*同1中的，这种情况下不可以省*/
            /*padding-top: 1px;*/
            /*border: 1px solid transparent;*/
            /*float: left;*/
        }
        .content{
            position: relative;  
            width:200px; 
            height:100px;
            left: 50%;
            margin-left: -100px;
            top: 50%;
            margin-top: -50px;
            background-color: tomato;
        }

或

		.box{
			width: 400px;
			height: 400px;
			margin: 50px auto;
			background-color: palegreen;
			
			overflow: hidden;
			/*padding-top: 1px;*/
			/*border: 1px solid transparent;*/
			/*float: left;*/
		}
		 /*margin-top 这里有两个坑：
		   1.百分比表示的时候参照的是父元素的宽；
		   2.当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界会发生叠加
		   3.只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。*/
 		.content {
			 width: 50%;
			 height: 50%; /*参照 父元素的height*/
 			 margin-top: -25%;/*参照 父元素的width*/
 			 margin-left: -25%;
 			 position: relative;
			 top: 50%;
 			 left: 50%;
 			 background-color: tomato;
 		}

情况2：

		.box{
			width: 400px;
			height: 400px;
			margin: 50px auto;
			background-color: palegreen;
			position: relative;
		}
		.content {
			position: absolute;  
		        width:200px; 
		        height:100px;
		        left: 50%;
		        margin-left: -100px;
		        top: 50%;
		        margin-top: -50px;
		        background-color: tomato;
		}

4.absolute与translate 垂直水平居中

		.box{
			width: 400px;
			height: 400px;
			margin: 50px auto;
			background-color: palegreen;
			position: relative;
		}
		.content {
			width: 50%;
			height: 50%;
			position: absolute;
			top: 50%;
	                left: 50%;
	                transform: translate(-50%, -50%);
	                background-color: tomato;
		}

5.display:flex 垂直水平居中

		.box{
			width: 400px;
			height: 400px;
			margin: 50px auto;
			background-color: palegreen;
			display: flex;
			justify-content: center;/*水平居中*/
			align-items: center;/*垂直居中*/
		}
		.content {
			width: 50%;
			height: 50%;
			background-color: tomato;
		}

6.line-height+height 垂直水平居中

	<body>
		<div class="content">我要垂直水平居住</div>
	</body>

		div,body{
			padding: 0;
			margin: 0;
		}
		body{
			background-color: darkgrey;
		}
		.content{
			width: 200px;
			height: 200px;
			margin: 50px auto;
			background-color: palegreen;
			text-align: center;
			line-height: 200px;
			vertical-align: middle;
		}

注意：用line-height等于height垂直居中只能用固定的px ,不可以用百分比，因为line-height参照的自身字体的大小，而不是height

效果图：

7.display:flex 嵌套使用垂直水平居中

<body>
		<div class="box">
			<div class="content">我要垂直居中</div>
		</div>
</body>

		div,body{
			padding: 0;
			margin: 0;
		}
		body{
			background-color: darkgrey;
		}
		.box{
			width: 600px;
			height: 400px;
			margin: 50px auto;
			background-color: palegreen;
			display: flex;/*这里用了css3的flex新特性垂直水平居中*/
			justify-content: center;/*水平居中*/
			align-items: center;/*垂直居中*/
		}
		.content {
			width: 50%;
			height: 20%;
			display: flex;/*嵌套使用flex*/
			justify-content: center;
			align-items: center;
			background-color: tomato;
		}

效果图：

说明：红色块在绿色块中居中，红色块中的文字垂直水平居中

白日梦想jun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 水平垂直居中的几种常见方式

下面是几种常见的水平垂直居中方式，可在不同情形下方便采用不同的方式html 共同的css div,body{ padding: 0; margin: 0; } body{ background-color: darkgrey; }1.最简单的margin:auto水平居中 .box{
复制链接

扫一扫

专栏目录