CSS常见布局总结

最新推荐文章于 2025-07-04 12:15:00 发布

原创最新推荐文章于 2025-07-04 12:15:00 发布 · 3.5k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#css布局 #css

CSS 专栏收录该内容

8 篇文章

订阅专栏

有很长一段时间没有更新博客了，近一段时间开始重新梳理知识点和写博客了，新的博客地址：欢迎访问。

居中

###元素水平居中###
####行内元素水平居中####

text-align:center;

####块元素水平居中####

margin:0 auto;

注意： margin 是复合属性，也就是说 margin: auto; 其实相当于 margin: auto auto auto auto;，margin: 0 auto;相当于 margin: 0 auto 0 auto;
根据规范，margin-top: auto; 和 margin-bottom: auto;，其计算值为0。这也就解释了为什么 margin: auto; 等同于 margin: 0 auto;
###单行文字垂直居中###

height:n px;
line-height:n px;

###文字相对图片、输入框垂直居中###

vertical-align:middle;

###单行文字垂直居中###

文本垂直居中

text-align + line-height实现单行文本水平垂直居中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style type="text/css">
	.box{
		line-height: 200px;
		width: 200px;
		height: 200px;
		background-color: red;
		color: #fff;
		text-align: center;
	}
	</style>
</head>
<body>
<div class="box">
我要垂直居中
</div>
</body>
</html>

水平居中

水平居中实现只要设置margin：0 auto;就可以实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>水平居中</title>
        <style type="text/css">
        #box{width: 200px;height: 200px;background: red;margin: 0 auto;}
        </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
</html>

垂直居中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>垂直居中</title>
        <style type="text/css">
        #box{
            width: 200px;height: 200px;background: red;position:absolute;top:50%;margin-top: -100px;
        }
        </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
</html>

CSS实现水平垂直居中

###使用absolute###
####方法一####
利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style type="text/css">
		.wrap{
			position: relative;
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.inner{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			width: 100px;
			height: 100px;
			background-color: blue;
			margin: auto;
		}
	</style>
</head>
<body>
<div class="wrap">
	<div class="inner"></div>
</div>
</body>
</html>

####方法二####
在子元素宽高已知的情况下，可以配合margin负值达到水平垂直居中效果。
使用绝对定位将content的定点定位到body的中心，然后使用负margin（content宽高的一半），将content的中心拉回到body的中心，达到水平垂直居中的效果。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>css实现水平垂直居中</title>
        <style type="text/css">
        .box{
        width:200px;
        height:200px;
        background: red;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-100px;
        margin-top: -100px;
    }
        </style>
    </head>
    <body>
    <div class="box"></div>
    </body>
</html>

####方法三 ##

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>垂直居中布局</title>
        <style type="text/css">
        html,body{
            width: 100%;height: 100%;margin: 0;padding: 0;
        }
        #box {
            width: 300px;
            height: 300px;
            background: red;
            margin: 0 auto; /*水平居中*/
            position: relative;/*相对自己当前进行定位*/
            top: 50%;
            margin-top: -150px;
        }
        </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
</html>

####方法四—CSS3实现垂直水平居中 ##
利用绝对定位元素的偏移属性和CSS3的translate(translate 函数的动画是利用 GPU，能够减少浏览器重绘)来实现的自身偏移达到水平垂直居中的效果。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS3实现垂直水平居中</title>
        <style type="text/css">
        #div1{
            width: 200px;height: 200px;background: red;
            top: 50%;
            left: 50%;
            position: absolute;
            transform: translate(-50%,-50%); /* 这里我们使用css3的transform来达到类似效果 */
        }
        </style>
    </head>
    <body>
    <div id="div1"></div>
    </body>
</html>

CSS3 flex实现元素的垂直居中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>垂直居中布局</title>
        <style type="text/css">
        html,body{
            width: 100%;height: 100%;margin: 0;padding: 0;
        }
        body{
            display: flex;align-items: center;justify-content: center;
        }
        #box{
            width: 200px;height: 200px;background: red;
        }
        </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
</html>

flex实现垂直水平居中

###margin: auto–完美的居中###
使用弹性盒子(display: flex)，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>margin垂直水平居中</title>
	<style type="text/css">
	.box{
		width: 500px;
		height: 500px;
		background: #ccc;
		display: flex;
		display: -webkit-flex;
	}
	.inner{
		background: red;
		width: 100px;
		height: 100px;
		margin: auto;
	}
	</style>
</head>
<body>
<div class="box">
	<div class="inner"></div>
</div>
</body>
</html>

###方法二###
在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS3 Flexbox轻松实现元素的垂直水平居中</title>
        <style type="text/css">
        .box{
            display: flex;
            width: 980px;
            height: 30rem;
            align-items:center;
            justify-content: center;
            background: #0099cc
        }
        h1{
            font-size: 1rem;
            padding: 1rem;
            border: 1px dashed #FFF;
            color: #FFF
        }
        </style>
    </head>
    <body>
    <div class="box">
        <h1>CSS3</h1>
    </div>
    </body>
</html>

table-cell实现元素水平垂直居中

###方法一###

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style type="text/css">
		.wrap{
			display: table-cell;/*此元素会作为一个表格单元格显示*/
			vertical-align: middle;
			text-align: center;
			background-color: red;
			width: 200px;
			height: 200px;
			border: 1px solid yellow;
		}
		.inner{
			display: inline-block;/*为了防止块级元素的宽度默认等于其父元素*/
			background-color: blue;
			color: #fff;
		}
	</style>
</head>
<body>
<div class="wrap">
		<div class="inner">我要实现水平垂直居中</div>
</div>
</body>
</html>

###方法二###
若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align:middle。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style type="text/css">
		.wrap{
			width: 200px;
			line-height: 200px;
			text-align: center;
			font-size: 0;
			background-color: #ccc;
		}
		.inner{
			vertical-align: middle;
			width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>
<div class="wrap">
		<img class="inner" src="12.jpg">
</div>
</body>
</html>

浮动元素水平居中

小提示：在不带float的情况下,p元素的宽度会自动调整至最大化,而在带float的情况下则正好相反,它会自动调整至最小化。
这里是在不知道父元素和子元素宽度的情况下实现子元素的水平居中。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>如何居中一个浮动元素</title>
        <style type="text/css">
        .p{
           position: relative;
            float: left;
            left:50%;
            border: 1px solid red;
        }
     .c{
            position: relative;
            float: left;
            right: 50%;
        }
        </style>
    </head>
    <body>
    <!-- 父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。
    相对定位元素的定位是相对其正常位置。
    -->
    <div class="p">
    <h1 class="c">居中浮动元素</h1>
    </div>
    </body>
</html>

**注意：**绝对定位在布局中可以很方便的解决很多问题，但是大多数时候都不去使用绝对定位，而是使用浮动等方法。而当需要 DOM 元素脱离当前文档流的时候才使用绝对定位。如：弹层，悬浮层等。

元素宽度未知实现居中

这里父元素和子元素的宽度都不知道，并且要求子元素的宽度随着其内容的增加而增加。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style type="text/css">
	.wrap{
		border: 1px solid red;
	}
	.inner{
		background-color: blue;
		//设置子元素为行内块元素
		display: inline-block;
		position: relative;
		left: 50%;
		transform: translate(-50%);
	}
	</style>
</head>
<body>
<div class="wrap">
		<div class="inner">我是一个可以改变宽度的div</div>
	</div>
</body>
</html>

三栏布局(两边固定，中间自适应)

###浮动实现###

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>浮动实现</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.left{
		width: 200px;
		height: 300px;
		background-color: red;
		float: left;
	}
	.right{
		width: 200px;
		height: 300px;
		background-color: blue;
		float: right;
	}
	.middle{
		margin: 0 210px;
		background-color: green;
		height: 300px;
	}
	</style>
</head>
<body>
	<div class="left">左边</div>
	<div class="right">右边</div>
	<div class="middle">中间</div>
</body>
</html>

注意：这种实现方式要把middle这个div放到最后面。相当于先把两边的div布局好，然后中间的div嵌入进去。
###绝对定位实现###

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>绝对定位实现</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.left{
		width: 200px;
		height: 300px;
		background-color: red;
		position: absolute;
		left: 0;
		top: 0;
	}
	.right{
		width: 200px;
		height: 300px;
		background-color: blue;
		position: absolute;
		right: 0;
		top: 0;
	}
	.middle{
		margin: 0 210px;
		background-color: green;
		height: 300px;
	}
	</style>
</head>
<body>
	<div class="left">左边</div>
	<div class="middle">中间</div>
	<div class="right">右边</div>
</body>
</html>

**注意：**这种方式不要求将middle这个div放在最后面，放在任意位置都可以。
###负margin值实现###

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>负margin实现</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.left,.right{
		  height: 300px;
                width: 200px;
                float: left;
	}
	.left{
		background-color: red;
		margin-left: -100%;
	}
	.right{
		background-color: blue;
		margin-left: -200px;
	}
	.middle{
		background-color: green;
		height: 300px;
		float: left;
		width: 100%;
	}
	</style>
</head>
<body>
	<div class="middle">中间</div>
	<div class="left">左边</div>
	<div class="right">右边</div>
</body>
</html>

参考博文：
实现垂直水平居中的5种方法
 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术