css-水平垂直居中

2020-10-11

css2

水平居中

margin 0 auto

有一个html文本（1.html）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div居中</title>
		<link rel="stylesheet" type="text/css" href="test.css">
	</head>
	<body>
		<div class="outerDiv" style="width:250px;height:350px;border: 2px solid red;">
			<div class="innerDiv" style="width: 150px;height: 150px;background-color: green;">
			</div>
		</div>
	</body>
</html>

设置下面的css样式，可以达到水平居中

1
2
3

.innerDiv{
	margin: 0 auto;
}

为什么不把上下左右的margin全部设置成auto呢？这样不就上下左右都居中了？

首先，div是一个块级元素，宽度默认都是相对于父元素的100%，即：一个块元素，如果我们不人为的去设置它的宽度，他就单独占一行！换句话说，这一行就只有他一个元素！想让他水平居中，左右margin设置成auto后底层很容易就可以计算出margin具体的数值应该是多少，从而达成左右居中。说到这里，我们再去考虑垂直居中：页面在垂直方向上块级元素不一定只有一个，即块级元素没有“默认占一列”这样的规定，因此即使把margin设置成auto，也不能自动计算出margin到底该是多少

垂直居中

line-height

对于单行文字在父元素中垂直居中，可以设置，这行文字的line-height为父元素的height。

table-cell

对于1.html，设置下面的css样式：

.outerDiv{
	display: table-cell;
	vertical-align: middle;
}
.innerDiv{
	margin: 0 auto;
}

定位+负边距

<div class="wrapper">
    <div class="box">
    </div>
</div>

.wrapper{
    position: relative;
    width: 500px;
    height: 500px
}
.box{
    position:absolute; 
    left:50%;
    top:50%;
    margin-left:-150px;
    margin-top:-100px;
    padding:20px;
    width:300px;
    height:200px;
    background:#41D7FB;
}

注意：想要在其中垂直居中的父元素必须要么是body元素，要么设置position: relative。

特点：

兼容性好
元素的宽高需要固定

定位+自适应边距

<div class="wrapper">
    <div class="box">
        西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书
    </div>
</div>

.wrapper{
    position: relative;
    width: 500px;
    height: 500px;
    background: black
}
.box{
    position: absolute;
    top: 0;
    bottom: 0;
    width:200px;
    bottom: 200px
    margin: auto;
    background: #41D7FB
}

需要固定宽高。

css3

直接利用flex布局。

或者，利用transform属性

<!DOCTYPE html>
<html>

<head>
    <style>
        .wrapper {
            position: relative;
            width: 500px;
            height: 500px;
            background: black
        }

        .box {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 200px;
            height: 200px;
            transform: translate(-50%, -50%);
            background: #41D7FB
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="box">
            西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书西瓜书
        </div>
    </div>
</body>
</html>