1. div水平居中

div{width:100px;height:100px;margin:0 auto;
}

2. div水平垂直居中

这里要有两层或者给body设置高度100vh，然后给元素设置绝对定位，并且left、right、top、bottom全为0，margin:auto就能实现div水平垂直居中了

<!-- <div class="out"><div class="box">test</div></div> -->
<div class="box">test</div><style>*{margin: 0;padding: 0;}body{height:100vh;}.box{border:1px solid red;height: 80px;width:80px;position: absolute;left: 0;bottom: 0;right: 0;top: 0;margin:auto;}   </style>

3. 使用table-cell实现div水平垂直居中

table-cell：块级表格元素

将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中。
子元素设置为inline-block

<!DOCTYPE html>
<html lang='cn'>
<head><meta charset='UTF-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>Document</title><style>*{margin: 0;padding: 0;}.out{display:table-cell;text-align: center;vertical-align: middle;width:100vw;height:100vh;}.box{border:1px solid red;height: 80px;width:80px;display: inline-block;}   </style>
</head>
<body><div class="out"><div class="box">test</div></div>
</body>
<script></script>
</html>

4. 使用弹性布局

使用弹性布局居中要给父元素加上高度才会垂直居中

<!DOCTYPE html>
<html lang='cn'>
<head><meta charset='UTF-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>Document</title><style>*{padding: 0;margin: 0;}.out{display: flex;justify-content: center;align-items: center;height: 100vh;}.test{width: 100px;height:100px;border:1px solid red;}</style>
</head>
<body><div class="out"><div class="test">test</div></div>
</body>
<script></script>
</html>

5. 子绝父相定位居中

left、top各50%，margin-left、margin-top是宽高的一半并且使用负数

<!DOCTYPE html>
<html lang='cn'>
<head><meta charset='UTF-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>Document</title><style>*{padding: 0;margin: 0;}.out{position:relative;height: 100vh;}.test{width: 100px;height:100px;position:absolute;top:50%;left:50%;margin-left:-50px;margin-top:-50px;border:1px solid red;}</style>
</head>
<body><div class="out"><div class="test">test</div></div>
</body>
<script></script>
</html>

div盒子水平垂直居中的几种方式相关推荐

css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
HTML5/CSS3基础——div盒子水平垂直居中的三种方案
HTML5/CSS3基础--div盒子水平垂直居中的三种方案一.基于定位的使div盒子水平居中的三种方式 1.使用top:50% left:50% 以及margin-top 和 margin-lef ...
html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相 ...
CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
css实现水平垂直居中的七种方式
css实现水平垂直居中的七种方式一.使用grid布局二.使用flex布局三.使用定位+外边距四.使用定位+平移五.使用外边距 + 平移六.使用文本对齐 + 行高七.使用表格单元一.使用 ...
CSS实现div盒子水平垂直居中的方式
网上看到有很多方式,这里记录一下我用起来顺手的几种方式,这里敲黑板做笔记,哈哈~~ <div id='container'><div class='middle'></d ...
如何实现div盒子水平垂直居中
关于如何使一个小盒子在大盒子中水平垂直居中有很多方法,下面将列举常用的几种: ###html 代码 <div class="parent"><div class= ...
div盒子水平垂直居中的方法
一.盒子没有固定的宽和高方案1.Transforms 变形这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义transform: translate(-50%, ...
水平垂直居中的几种方式
文章目录水平垂直居中一.实现水平垂直居中的方式二.具体实现元素定宽高利用定位 + calc 利用定位 + margin:负值元素不定宽高利用定位 + margin:auto 利用定位 + ...

div盒子水平垂直居中的几种方式

1. div水平居中

2. div水平垂直居中

3. 使用table-cell实现div水平垂直居中

4. 使用弹性布局

5. 子绝父相定位居中

div盒子水平垂直居中的几种方式相关推荐

最新文章

热门文章