三种让div居中的方式

写在前面：div居中于屏幕中间有很多种方式，这里就记录下学习的时候的三种方式毕竟面试题问的多！！

1.宽度和高度已知的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 400px;
height: 200px;
position: relative;
background: red;
}
.content {
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -50px;
background: green;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>

2.宽度和高度未知

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 400px;
height: 200px;
position: relative;
background: red;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: green;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>

3.flex布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 400px;
height: 200px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.content {
width: 200px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>

三种让div居中的方式相关推荐

html 三种插入css样式的方式
三种插入css样式的方式一.外链式引入css样式二.内嵌式使用css样式三.行内式引入css样式一.外链式引入css样式在head标签中使用<link rel="styles ...
android系统密码设置功能,手机锁屏密码怎么设置三种安卓手机锁屏方式推荐
手机中有很多应用都是与金钱挂钩,特别是微信与支付宝等等既涉及到隐私又与财产关联,这是后手机的安全就尤为重要的,而手机的锁屏密码就是一道最基本的防护措施,那么手机锁屏密码怎么设置?来看看小编推荐的三种安 ...
Extjs中三种不同的数据提交方式
Extjs中三种不同的数据提交方式 Extjs的三种提交方式: 表单Ajax提交,普通提交,单独Ajax提交: 1.表单ajax提交(默认提交方式) 提交函数:当按下表单中的提交按钮时执行下面的btn ...
【redis】三种redis数据导出导入方式
文章目录 1.概述一.redis-dump方式二.aof方式导入三.rdb文件迁移方式 1.概述转载:三种redis数据导出导入方式一.redis-dump方式 redis-dump安装 y ...
三种主流的Kubernetes部署方式
[译者的话]本文分析介绍了三种主流的Kubernetes部署方式,为广大Kubernetes的使用者提供了很好的参考借鉴. [烧脑式Kubernetes实战训练营]本次培训理论结合实践,主要包括:Ku ...
一、三种基本的共享上网方式：
一.三种基本的共享上网方式: 总的来说,目前的共享上网方式不外乎:网关型共享上网.代理服务器型共享上网和路由共享上网三种.下面分别予以简单介绍. 1. 网关型共享上网: 网关型共享上网,就把直接连接互 ...
让div居中的方式的几种方法
让div水平居中的方式的几种方法. 文章目录一.margin 二.绝对定位三.子元素绝对定位父元素相对定位四.flex布局总结一.margin 第一种方式我们可以利用外边距属性来使div水平 ...
三种js轮播实现方式详解（看一遍就会）
js轮播的三种实现方式 1.替换scr(入门级) <!DOCTYPE html> <html><head><meta charset="utf-8& ...
Kubernetes的三种集群外部访问方式及使用场景说明：NodePort、LoadBalancer和Ingress
Kubernetes的三种外部访问方式:NodePort.LoadBalancer和Ingress 最近有些同学问我 NodePort,LoadBalancer 和 Ingress 之间的区别.它们都 ...

三种让div居中的方式

三种让div居中的方式

1.宽度和高度已知的

2.宽度和高度未知

3.flex布局

三种让div居中的方式相关推荐

最新文章

热门文章