探究css中各种情况下的元素的垂直和水平居中的问题(面试题)

时间:2022-07-30 22:22:32

今天各种纠结,真的是不想写东西(ps 我比较懒)但是老是有人问这个问题,于是我就本着分享精神还是整理一下,好了废话不多说 开始上代码

问题:外边是一个容器,容器中还有一个容器,那么请问怎么让里边的容器垂直水平居中显示??

      考察知识点:基本css知识

下边咱们开始说以下 那么几种情况

(1)外边的容器宽度和高度确认,里边是行内元素,那么答案就是

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0; padding: 0; border: none;}
.contain{width: 300px; height: 300px; border: 1px solid red; background: #999;text-align: center; }
.contain span{line-height: 300px;}
</style>
</head>
<body>
<div class="contain">
<span>我是行内元素 我要垂直水平居中</span>
</div>
</body>
</html>

这个就不贴图了  自己两分钟就能测试出来

于是下边开始有人说 我xx  这么简单我也知道  (一切技术都是从简单的开始的 像很多语言的第一个程序都是helloworld一样)

(2)里边的容器是img元素(为什么把img元素单独拿出来啊   因为 img元素是一个空元素 也有人叫做替代元素)

解释名词  空元素/替代元素:替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

有哪些:(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0; padding: 0; border: none;}
.contain{width: 400px; height: 400px; border: 1px solid red; background: #999;text-align: center; vertical-align:middle; display: table-cell;}
</style>
</head>
<body>
<div class="contain">
<img src="img/dog.jpg"/><!--图片大小为200*200-->
</div>
</body>
</html>

效果如下:

探究css中各种情况下的元素的垂直和水平居中的问题(面试题)

(3)里边的容器是div元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0; padding: 0; border: none;}
.contain{width: 400px; height: 400px; border: 1px solid red; background: #999;text-align: center; vertical-align:middle; display: table-cell;}
.wrap{width: 200px; height: 200px; background: yellow; margin: auto;}
</style>
</head>
<body>
<div class="contain">
<div class="wrap"></div>
</div>
</body>
</html>

探究css中各种情况下的元素的垂直和水平居中的问题(面试题)

还有一些别得方法也可以做到 我这里就不一一列举了!