水平居中与垂直居中

Posted 2020-09-29 轩悦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了水平居中与垂直居中相关的知识，希望对你有一定的参考价值。

一、水平居中

1）如果是行内元素，需要在它的父元素上设置text-align: center;

2）如果是块元素，直接设置元素的css属性text-align: center;

或则可以定宽再加上margin:0 auto;

p{
width: 300px;
margin:0 auto;
}
p{margin:auto;}

二、垂直居中

垂直居中的时候情况会比较多，根据不同的情况分别有下列几种方法

1）表格布局法------不用知道需要居中的元素是什么东西

利用表格的vertical-align属性，当然首先将父元素的显示方式设置为表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

.content,.content2{
border: 1px solid #1369C0;
height: 300px;
width: 300px;
margin:0 auto;
text-align: center;
display: table;

}
.content span,.content2 .wrap{
display: table-cell;
vertical-align: middle;
}


    </style>
</head>
<body>

<div class="content">
<span>元素垂直居中</span>
</div>
<div class="content2">
<div class="wrap"><img src="img/collection.png" /></div>
</div>

</body>
</html>

对于图片，我们需要在它的外面加上一层包裹，否则它不会居中，而有的不需要，所以，为了方便或则统一，我们需要在要居中的元素外层再添加一层包裹，如上面的.wrap,好处是不用知道需要居中的元素是什么东西，比如上面的img标签，在css中未对其位置进行任何设置。

二、伪元素法

具体思路是给居中元素的包裹层加一个伪元素（:before或则:after），content为空，使其高度为包裹元素的100%，然后设置该元素和居中元素的dispaly属性为inline-block,同时vertical-align:middle。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
.content,.content2{
border: 1px solid #1369C0;
height: 300px;
width: 300px;
margin:0 auto;
text-align: center;
}
.content:before,.content2:before{
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
.content p{
display: inline-block;
}
</style>
</head>
<body>
<div class="content">
<p>元素垂直居中</p>
</div>
<div class="content2">
<img src="img/collection.png" />
</div>
<p>块元素水平居中</p>
</body>
</html>

3、基于绝对定位的方法--------需要知道先知道居中的元素是哪一个

1）定宽、定高的元素（绝对定位+负的外边距）

实现原理：先把要居中的元素的左上角放在已定位祖先元素的正中心，然后再利用负外边距把它向左、向上移动（移动距离相当于自身宽高的一半），从而把元素的正中心放置在祖先元素的正中心。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直居中</title>
<style type="text/css">
.content,.content2{
border: 1px solid #1369C0;
height: 300px;
width: 300px;
margin:0 auto;
text-align: center;
position: relative;
}
.ele{
position: absolute;
width: 100px;
height: 30px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -15px;
}
</style>
</head>
<body>
<div class="content">
<div class="ele">元素垂直居中</div>
</div>
<div class="content2">
<div class="ele">
<img src="img/collection.png" />
</div>
</div>
<p>块元素水平居中</p>
</body>
</html>