用css实现垂直水平居中的几种方法

1.用inline-block和vertical-align来实现居中：这种方法适合于未知宽度高度的情况下。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#container{text-align: center;height: 400px;background: #4dc71f;}#container:before{content: "";height: 100%;display: inline-block;vertical-align: middle;margin-right: -0.25em;}#center-div{display: inline-block;vertical-align: middle;background: #2aabd2;}</style>
</head>
<body><div id="container"><div id="center-div">xxx</div></div>
</body>

参考：https://css-tricks.com/centering-in-the-unknown/
2.用相对绝对定位和负边距实现上下左右居中：高度和宽度已知

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>test</title><style>.div2{height: 600px;width: 600px;position: relative;border: 2px solid #000;}.img2{height: 200px;width: 200px;position: relative;top: 50%;left: 50%;margin: -100px 0 0 -100px;}</style>
</head>
<body><div class="div2"><img class="img2" src="data:images/hongbao.png"></div>
</body>
</html>

其实第二种要理解不能，首先相对父元素top，left定位在50%的位置，这时候只是图片左上角居中，而中心点还没居中，加上margin: -100px 0 0 -100px;利用负边距把图片的中心点位于父元素的中心点，从而实现垂直水平居中
3.利用绝对定位来实现居中：适合高度，宽度已知的情况。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#container{text-align: center;height: 400px;background: #4dc71f;position: relative;}#center-div{position: absolute;margin: auto;top: 0;right: 0;left:0;bottom: 0;width: 200px;height: 200px;background: #2b669a;}</style>
</head>
<body><div id="container"><div id="center-div">xxx</div></div>
</body>
</html>

4.使用table-cell，inline-block实现水平垂直居中：适合高度宽度未知的情况

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#container{display: table-cell;text-align: center;vertical-align: middle;height: 300px;background: #ccc;}#center-div{display: inline-block;}</style>
</head>
<body><div id="container"><div id="center-div">xxx</div></div>
</body>
</html>

5.使用css3中的transform来时实现水平垂直居中：适合高度宽度未知的情况

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#container{position: relative;height: 200px;background: #333;}#center-div{position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);}</style>
</head>
<body><div id="container"><div id="center-div">xxx</div></div>
</body>
</html>

还可以使用Flexbox来实现水平垂直居中；适合宽度高度未知情况，但是要注意兼容性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#p_2{display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background: #009f95;}</style>
</head>
<body><div id="p_2"><div id="c_2">xxxxxxx</div></div>
</body>
</html>

用css实现垂直水平居中的几种方法相关推荐

使一个div垂直+水平居中的几种方法
前几天去一家互联网公司面试,面试官问到了这个应该算是比较简单的问题,在我自认为回答正确时,才知道这道题的答案有很多种,下面就让我们一起来探讨一下这个问题: 思路1:绝对定位居中(原始版) 这个是我回答 ...
H5+CSS3 实现div垂直水平居中的几种方式
实现div垂直水平居中的11种方法 <div class="father"><div class="son"></div> ...
关于css垂直水平居中的几种方式
关于css垂直水平居中的几种方式 css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简 ...
CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法设置行高使用定位和translate 使用弹性盒子设置行高我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
CSS教程:div垂直居中的N种方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
html如何将图片做成六边形,css画正六边形的两种方法
说下两种css 制作正六边形的方法. 先看一下结果: 在之前要先了解一下正六边形内角和边的关系,正六边形的每个内角是60deg,如图(√3其实是根号3): 方法一:原理把正六边形分成三部分,左中右分别 ...
html中怎么写正六边形,如何用css画正六边形？用css画正六边形的两种方法（代码实例）...
本章给大家介绍如何用css画正六边形?用css画正六边形的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在之前要先了解一下正六边形内角和边的关系,正六边形的每个 ...

用css实现垂直水平居中的几种方法

用css实现垂直水平居中的几种方法相关推荐

最新文章

热门文章